Changing CSS properties via JavaScript
The stylesheets can be manipulated directly in JS with the document.styleSheets
list.
Example:
<html>
<head>
<title>Modifying a stylesheet rule with CSSOM</title>
<style type="text/css">
body {
background-color: red;
}
</style>
<script type="text/javascript">
var stylesheet = document.styleSheets[1];
stylesheet.cssRules[0].style.backgroundColor="blue";
</script>
<body>
The stylesheet declaration for the body's background color is modified via JavaScript.
</body>
</html>
The example is by Mozilla Contributors and copied from:
- Using dynamic styling information - Web API Interfaces | MDN
Set CSS property in JavaScript?
Use element.style
:
var element = document.createElement('select');
element.style.width = "100px";
Getting or changing CSS class property with Javascript using DOM style
As mentioned by Quynh Nguyen, you don't need the '.' in the className. However - document.getElementsByClassName('col1') will return an array of objects.
This will return an "undefined" value because an array doesn't have a class. You'll still need to loop through the array elements...
function changeBGColor() {
var cols = document.getElementsByClassName('col1');
for(i = 0; i < cols.length; i++) {
cols[i].style.backgroundColor = 'blue';
}
}
Changing CSS Values with Javascript
Ok, it sounds like you want to change the global CSS so which will effictively change all elements of a peticular style at once. I've recently learned how to do this myself from a Shawn Olson tutorial. You can directly reference his code here.
Here is the summary:
You can retrieve the stylesheets via document.styleSheets
. This will actually return an array of all the stylesheets in your page, but you can tell which one you are on via the document.styleSheets[styleIndex].href
property. Once you have found the stylesheet you want to edit, you need to get the array of rules. This is called "rules" in IE and "cssRules" in most other browsers. The way to tell what CSSRule you are on is by the selectorText
property. The working code looks something like this:
var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; //maybe '#tId'
var value = rule.value; //both selectorText and value are settable.
Let me know how this works for ya, and please comment if you see any errors.
Related Topics
How to Change CSS Href="" Using JavaScript
Width of the Parent Container with Jquery
Why Do Developers Append a Query String in JavaScript Files' Stylesheet Links
Find Unused CSS Rule and Js Script in a Web Project
Fixing Sub-Pixel Rounding Issue in a CSS Fluid Grid
Implementing Transition Effects in React Js When State Changes
CSS Class Selector Styles Not Being Applied in React Project
How to Click on Hidden Element in Protractor
How to Override the CSS Scroll Behavior with Scrollto in JavaScript
Jquery .Css() Function Not Returning Expected Values
How to Dynamically Change the Value of a CSS Property Inside a Stylesheet
JavaScript -Change CSS Color for 5 Seconds
Where in the HTML File Should Jquery and Bootstrap Be Placed