Change a css class background in css file href Javascript - javascript

I am trying to change a Css file selector class in JavaScript, but the code I am using is not working!
Trying to change this class in my Css -
.block-square {
background-color:rgb(167,128,209);
}
I want to change the background-color in this class.
The css href is here <link id="myStyleSheet" href="css/style.css" rel="stylesheet"> This is where it is located.
Here is my code that is not working:
function styleOne() {
document.getElementById('myStyleSheet').href = 'css/style.css';
var square = document.querySelector(".block-square");
square.style.backgroundColor = "#ffffff";
}
Please let me know why this code is not working.

If you just want to change the background-color of .block-square, here is a sample.
$("#styleOne").click(function() {
$(".block-square").css("background-color", "#FFFFFF");
});
$("#styleTwo").click(function() {
$(".block-square").css("background-color", "rgb(167,128,209)");
});
.block-square {
width: 100px;
height: 100px;
background-color: rgb(167, 128, 209);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-square"></div>
<button id="styleOne">StyleOne</button>
<button id="styleTwo">StyleTwo</button>

Use jQuery, it is much easier.
function styleOne() {
$(".block-square").css("background-color","yellow");
}

Related

Change class property by using jquery

I would like to add a property directly to a class instead of objects that have given class.
It should work for dynamically added elements as well.
I tried to do it by using $(".myElement").css("background", "green"); but it works only for already existing elements, the new elements are created with default class properties.
My code is:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style>
.myElement{
width: 20px;
height: 20px;
background: red;
margin: 5px;
}
</style>
</head>
<body>
<div id="elementsContainer">
<div class="myElement"></div>
<div class="myElement"></div>
</div>
<button id="addClassProperty">Add class property</button>
<button id="addNewElement">Add new element</button>
<script>
$("#addClassProperty").click(function(){
$(".myElement").css("background", "green");
});
$("#addNewElement").click(function(){
$("#elementsContainer").append("<div class='myElement'></div>");
});
</script>
</body>
</html>
The expected result should add a new property to all existing element and to every newly created elements without cast change property for newly created element.
Is there any way to solve this problem?
This is far simpler by adding a class to the parent container and a corresponding css rule for .myElement when that class exists
$("#addClassProperty").click(function() {
$('#elementsContainer').addClass('active')
});
$("#addNewElement").click(function() {
$("#elementsContainer").append("<div class='myElement'></div>");
});
.myElement {
width: 20px;
height: 20px;
background: red;
margin: 5px;
}
.active .myElement {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elementsContainer">
<div class="myElement"></div>
<div class="myElement"></div>
</div>
<button id="addClassProperty">Add class property</button>
<button id="addNewElement">Add new element</button>
Rather than "change class property", you want to change/add a css rule.
EDIT: better link --> Changing a CSS rule-set from Javascript
Or you could have one/multiple classes with existing css and change your objects' classes instead.
When you apply a green background color to elements, the style of the background color is entered into the style attribute. This is how the css() method works. Therefore, each new element has a background color of red, taken from the css.
To solve your problem, you can use the method with adding a class, or change the color of the background rule in the CSS itself. This can be done using cssRules by referring to the document. Like this:
[...document.styleSheets[0].cssRules].find((currentSel) => (currentSel.selectorText = ".myElement")).style.background = "green";
By placing this code inside the click event of the selector #addClassProperty.
$("#addClassProperty").click(function () {
[...document.styleSheets[0].cssRules].find((currentSel) => currentSel.selectorText = ".myElement").style.background = "green";
});
$("#addNewElement").click(function () {
$("#elementsContainer").append("<div class='myElement'></div>");
});
.myElement {
width: 20px;
height: 20px;
background: red;
margin: 5px;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style></style>
</head>
<body>
<div id="elementsContainer">
<div class="myElement"></div>
<div class="myElement"></div>
</div>
<button id="addClassProperty">Add class property</button>
<button id="addNewElement">Add new element</button>
</body>
</html>

How can I call a CSS animation on a nested element within a parent element?

I'm looking to remove a class from a nested div element upon focus of the parent. Then I want to replace the class with another that has a CSS animation that will autoplay. I'm looking to do this within multiple elements in the same class as well so it will need to be able to handle more than one. I'm not sure what to do as I've kind of reached to where I believe I should be at this point but to no avail.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<style>
<style>
div {
filter: opacity(0%);
background-color: red;
width: 300px;
height: 300px;
position: relative;
top: 50%;
left: 50%;
z-index: 1;
}
.noGrow {
}
.grow {
animation-name: derp;
animation-duration: 1s;
filter: opacity(100%);
}
#keyframes derp {
from{width: 0px;}
to{width: 300px;}
}
</style>
<body>
<span id="divHolder" tabindex="1">
<div class="noGrow firstDiv">
</div>
</span>
</body>
<script src="jquery.js"> </script>
<script>
var divHolder = $(".divHolder");
var firstDiv = $(".firsDiv");
divHolder.focus(function () {
if($(".firstDiv").hasClass("noGrow")){
$(this).removeClass("noGrow");
$(this).addClass("grow");
console.log("It's working.");
}
});
</script>
</html>
Thank you for any and all help. It is much appreciated.
Looking at your code, these two lines seem to be the problem:
$(this).removeClass("noGrow");
$(this).addClass("grow");
$(this) refers to the divHolder element you are binding the focus event to. If you want to change the class of firstDiv, you'll need to change the lines to this:
firstDiv.removeClass('noGrow');
firstDiv.addClass('grow');
However, based on your CSS, I would suggest using toggleClass, and leaving the noGrow class off completely. Your div becomes:
<div class="firstDiv"></div>
and your JS becomes:
divHolder.focus(function () {
firstDiv.toggleClass('grow');
console.log('growing!');
});
Finally, if you don't know where in the list of descendants your 'growable' div will be, you can use something like find():
divHolder.focus(function(){
$(this).find('div').toggleClass('grow');
// if the div is given an id like #growable we can do this:
// $(this).find('#growable').toggleClass('grow');
});

How to change 'div' background and text colour using jquery to flash a message And revert back to original colors?

I have a div with id and class names as tab. The css are defined for the div. The original background-color is blue and color is white. I need to flash some text on this div , where the message should flash 3 times with black background and white text and vice versa.
I tried toggleClass. Using this the effect is generated but the previous class css is not restored.
I have tried fade also $("#tab").fadeOut(200).fadeIn(200); , it helps the blinking part but doesnt give the desired results.
Please suggest... Thanks in advance.
This is what i have tried so far:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/styles.css">
<style type="text/css">
.backgroundRed
{
background-color: #cccccc;
color: red;
}
.blink
{
background-color: black;
color: white;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var flg = 0;
$.fn.blink = function()
{
var i = 0;
for(var i = 0; i <= 3; i++)
{
// attempt#1 //
//blinking works well with this ////
//$("#test").fadeOut(200).fadeIn(200);
// attempt#2 //
//changes looks good but doesnt revert back to original class ////
//$(".backgroundRed").toggleClass("blink");
//$("#test").removeClass("blink");
//$("#test").addClass("backgroundRed");
// attempt #3 //
// doesnt work correctly
if(i >= 3)
{
$("#test").fadeOut(200).fadeIn(200);
$("#test").removeClass("blink");
$("#test").addClass("backgroundRed");
}
else
{
$("#test").fadeOut(200).fadeIn(200);
$("#test").removeClass("backgroundRed");
$("#test").addClass("blink");
}
}
}
$("#tab").click(function(){
$.fn.blink();
});
});
</script>
<html>
<body>
<div id="test" class="backgroundRed" style="height: 200px; width: 400px; ">
<h1>test value</h1>
</div>
<button id="tab">click</button>
</html>
How about something like this:
http://jsfiddle.net/sydzL8Lc/21/
Using https://github.com/madbook/jquery.wait and since you want blink 3 times
$("#test").addClass("blink").wait(400).removeClass("blink").wait(400).addClass("blink").wait(400).removeClass("blink");
Use this blink()
function blink(){
var i = 0;
var obj = setInterval(function(){
if(i == 5)
{
$("#divtoBlink").removeClass("backgroundRed");
clearInterval(obj);
}else{
$("#divtoBlink").toggleClass("backgroundRed");
}
i++;
},100)
}
DEMO

Getting this.style from a polymer element

Just learning polymer. I want to grab the color of fixed-header when it is clicked.
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="fixed-header" attributes="height" style="background-color:blue">
<template>
<style>
:host {
display: block;
background-color: red;
}
::content * {
list-style-type: none;
}
</style>
<header layout horizontal on-click="{{changeColor}}">
<content select="li"></content>
</header>
</template>
<script>
Polymer('fixed-header', {
changeColor: function() {
var color = this.style.backgroundColor
console.log(color)
}
});
</script>
</polymer-element>
When I don't use the inline style on polymer-element, I can't use this.style.backgroundColor, even though it is definitely changing color to be red. Why can't I use this.style.backgroundColor when it is just through the template style tag?
Also, I'm trying to set the backgroundColor, but I can't do that either.
Returning an object representation of the contents of a node's style attribute is the expected behavior of the style property. What you want is getComputedStyle():
var color = getComputedStyle(this).backgroundColor;
Here's a working jsbin.
To your second comment, setting style works fine for me in Chrome 36 and 38.

Why isnt my javascript working?

All my code seems to work except my javascript am I doing something wrong?
Thanks Im only a beginner!
I am trying to make the background change when the mouse goes over the 'Tags' tab but it wont do it? What is going on?
HTML:
<html>
<head>
<script language="JavaScript" type="text/javascript">
// This changes color on mouseover, leaves existing color box.
$('.tab-item').mouseover(function() {
$(this).addClass("tab-mouseover");
}).mouseout(function() {
$(this).removeClass("tab-mouseover");
});
// This changes color when clicked, removed old color box.
$('.tab-item').click(function() {
$('.tab-item').removeClass("tab-selected");
$(this).addClass("tab-selected");
});-->
</script>
<link href="arg.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tab-item tab-selected" id="search-box">
Search
</div>
<div class="tab-item" id="tag-box">
Tags
</div>
</body>
</html>
CSS:
.tab-item {
-moz-border-radius: 10px;
border-radius: 10px;
font: 14px helvetica;
color: #000;
height: 20px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 75px;
}
.tab-mouseover {
background: #bdbdbd;
}
.tab-selected {
background: #c0c0c0;
}
Thanks!
James
You're using jQuery but haven't included it.
You also need to put your jquery code into the jquery ready event:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
// This changes color on mouseover, leaves existing color box.
$(function(){
$('.tab-item').mouseover(function() {
$(this).addClass("tab-mouseover");
}).mouseout(function() {
$(this).removeClass("tab-mouseover");
});
// This changes color when clicked, removed old color box.
$('.tab-item').click(function() {
$('.tab-item').removeClass("tab-selected");
$(this).addClass("tab-selected");
});
});
-->
</script>
You haven't added your library (jQuery, I think) as a source here.
Add it like this:
<script src='http://foo.com/bar/library.js'></script>
If you are, indeed using jQuery, you can directly add the following code to make it work:
<script src='http://code.jquery.com/jquery-1.6.4.js'></script>
Note that the above means you are depending on the availability of the jQuery website and not your own.
As per James' comment on this, yes, you can scrap the jQuery completely, but I'd recommend you to learn JavaScript yourself instead of copying code from a website. If you want to change the background color of the field onmouseover, use code like this:
<div onmouseover="this.style.backgroundColor='#bdbdbd';" onmouseout="this.style.backgroundColor='white';">Search</div>
Or
<div onmouseover='this.className="tab-mouseover"' onmouseout='this.className=""'>Search</div>
Or without JavaScript and just simple CSS:
<style>
.tab-mouseover:hover{
background: #bdbdbd;
}
</style>
<div class='tab-mouseover'>Search</div>
I can't answer the latter part, because I don't understand the use of deleting and then adding the same class to an element onclick.
Well, first, you haven't included a link to the jQuery library in your code. As a result, your code won't work, wherever you put it.
Second, since your code is in a script element at the head of the document, it will execute before the body of the document has been rendered. You need to put it in a
$(document).ready(function() {
/*
* Your code here
*/
});
block.
Try this:
$('.tab-item').hover(
function() {
$(this).addClass('tab-mouseover');
},
function() {
$(this).removeClass('tab-mouseover');
}
);
$('.tab-item').click(function() {
$('.tab-selected').removeClass('tab-selected');
$(this).addClass('tab-selected');
});
http://jsfiddle.net/7dDTv/1/

Categories

Resources