How can I get and change the Style Attribute property value
Example
<div id="styleChanger" style="color: rgb(163, 41, 41);">
// some content
</div>
How can I change the Style property color value
Every CSS declaration, inline (a.k.a style attribute), in the page header or in an external file, is just incorporated into the DOM object attributes once the browser has read it.
This is to say that you're not actually interested in changing the style attribute, but an attribute of the object you're working on in Javascript. For CSS attributes, jQuery's .css() method is the answer.
$('#styleChanger').css("color","red");
You need a ready class, for example:
.interactClass {
color: #d2232a;
}
and then you can
$('#styleChanger').removeClass().addClass('interactClass');
Or you can switch single properties with css method:
$('#styleChanger').css("color", "#D2232A").css("font-size", "20px");
Use the css() method in jQuery. Here is a link to the documentation: http://docs.jquery.com/CSS/css#name
This will allow you to do something like:
$("#styleChanger").css("color", "#888888");
Related
I wanna get a style of an element from css file with javascript. But, i just can getting only elements i enter style properties on javascript. I tried like this on Angular;
angular.element(document.getElementById("box")).css("width")
It's not worked. After, i tried like this;
document.getElementById("box").style
But it's not worked. How can i accomplish this?
This isn't an Angular issue, it's just how CSS and Javascript interact. You need to use getComputedStyle to read style properties that were defined in a CSS file.
// This will work (because it's an inline style)
console.log(document.getElementById('a').style.width)
// This won't work (because the style was defined in css):
console.log(document.getElementById('b').style.width)
// getComputedStyle will work regardless of the source:
console.log(window.getComputedStyle(document.getElementById('b')).width)
#b {width: 100px}
<div id="a" style="width: 100px">A</div>
<div id="b">B</div>
You cannot get css template rule values of elements calling style properties unless they were set
*1. using inline style on html element level; or
*2. the style property has been set using JavaScript
which does the same: writes to inline html style property of the target element.
the solution is to use the computed style instead:
as in : getComputedStyle(box,0).width
Can I change the backgroundColor property value using the prop method?
I'm new to programming. :)
This is what I have,
$('ul').prop('backgroundColor','red');
I read the chapters on this book I'm reading and it is my understanding that I can change properties from the DOM using the prop method in jquery. I can change other DOM properties such as className. Why not backgroundColor? Writing this I also tried atr.
$('ul').attr('background-color','red');
In this case, attr does have access to CSS properties, correct? However when using the prop method, we do have access to some CSS properties? Why is backgroundColor created?
I know the best way to go about changing the background color would be to use the css method, in jquery that is. I just wanted to know if or not the prop or atr method can change the background color, and why not, if not. I believe this will give me a better understanding of the DOM.
Thanks!
You need to use .css() to manipulate the CSS properties.
$('ul').css('background-color','red');
The backgroundColor is nested property of style property of the element so .prop('backgroundColor','red'); won't works here.
Instead, you can set property by getting DOM element. In case there is multiple element then you need to iterate over them.
$('div')[0].style.backgroundColor = 'red';
// if there is multiple elements
$('div').each(function() {
this.style.backgroundColor = 'red';
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>a</div>
Or use css() method to set any style property.
$('div').css('backgroundColor', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>a</div>
$('ul').attr('background-color','red');
does not work as the attribute is "style" and backgroundColor is a property of that.
You need to use:
$('ul')[0].style.backgroundColor = 'red';
When coding straight html you can specify inline css like this:
<div style="background-color:#00000"></div>
Therefore using jquery, you can leverage this feature by using the attr method.
$('div').attr('style','background-color:#00000;');
So in a way, yes you can alter css using the attr method. Because there is an "attribute" for style (css) in html and changing html attributes is basically what attr is for.
Background:
I created a simple DOM event example: see jsfiddle here.
<div id="squirrel" onmouseover="toggleFloat(this)">
<p>Click me!</p>
</div>
<script>
function toggleFloat(ele){
var current = ele.style.cssFloat;
console.log("cssFloat: "+current);
if(current==="left")
ele.style.cssFloat="right";
else
ele.style.cssFloat="left";
}
</script>
Accompanying css:
#squirrel{
float:left;
}
Odd behaviour was noticed: In the DOM, the #squirrel's initial value for the cssFloat property was "". (Open the developer console to see this. Or notice that the #squirrel doesn't move until the second event fires.).
My question is: Should the CSS code not have initialized the cssFloat property of the DOM object? ...or any of the style properties for that matter?
The style property of an element represents its inline style (defined with the style attribute).
Those are not modified by the css rules defined in a your css file. The browser computes the final style based on those rules and the inline style.
The final computed style can be retrieved using MDN: Window.getComputedStyle()
You generally should avoid to use inline style attributes. Normally you should try to use class to manipulate the appearance of a certain element. Also the use of the style property to dynamically change the inline style should only be used if there is really no way around it, e.g. if you need to move an element dynamically. You could also read the answer to Inline tags vs. inline css properties for more informations.
CSS never modifies the DOM.
The 'style' attributes in the DOM are merged-with/override the CSS defined in stylesheets.
I have a situation in my project , in css I have a class
which is empty for now
#version_mobile.hidden
{
}
and in js Im doing this
this.$("#version_mobile.hidden").css({right: - window.text_mobile_width});
(I supose my selector is bad ?)
how to add "right" atribute to this class with this dynamically created value ?
to class become
#version_mobile.hidden
{
right : -450px;
}
Btw I need to use this class because the animation is working with it :/
.css() function changes the inline css style but has no effect over the css classes at all.
As pointed out in the documentation:
When using .css() as a setter, jQuery modifies the element's style
property.
You can also change the classes by using the addClass(), removeClass() or even the toggleClass() functions of jQuery.
You cannot add to the class properties, but you can apply rules to the element style.
this.$("#version_mobile.hidden").css({"right", "- window.text_mobile_width"});
you can not add definations for class in jquery.
but you can add any style to your selecter.
What are you trying to achieve?
you cannot add a property to the css file using this.
what you should look at is you apply this id or class to your html elements
and access the elements in the javascript using the jquery selectors
$(#selector) and modify the property using .css.
So you will achieve the same result this way as any existing property style for that
element will be overridden with your latest style put through the jquery.
It's technically possible to modify style rules on the fly, but it's difficult.
In the document object you will find an (array) property called styleSheets, with one entry for each referenced stylesheet.
Each stylesheet object (of type CSSStyleSheet) has an insertRule method, which you can use to create new rules, or delete existing rules. What appears to be difficult is enumerating the existing set of rules so you can find which one to modify or delete.
That said, it's generally far preferred to simply change an element's classes than to try to dynamically change the styling of an existing class.
See also http://davidwalsh.name/add-rules-stylesheets
How do I set CSS properties of .anyclass:before or .anyclass:after via javascript?
Expanding on my comment:
:before and :after are not properties, they are CSS selectors. Therefore you cannot set them on some element, you can only add rules with such selectors to a stylesheet.
If you want to add DOM nodes before or after all elements that match a given selector with jQuery, you can use the before and after methods respectively.
If you want to add CSS rules to the current page, you can use the DOM level 2 CSSStyleSheet interface. A minimal example would look like this:
// Note: this is sample code. Do not use it blindly in your own page.
document.styleSheets[0].insertRule(".foo:before { /* something */ }", 0);
See the MDN documentation for insertRule for more example code.
Only by modifying the stylesheet itself. Since they aren't real elements you cannot modify their inline style (because they don't have any).