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.
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
How can I change one value in style attribute with JavaScript?
<script type="text/javascript">
function changeHeight(height)
{
document.getElementById("div1").style.height = height + "px";
}
</script>
Related Topics
Contenteditable, Set Caret At the End of the Text (Cross-Browser)
Html Form Readonly Select Tag/Input
Disabling Browser Print Options (Headers, Footers, Margins) from Page
Jquery Disable/Enable Submit Button
How to Implement "Select All" Check Box in Html
Browser Detection Versus Feature Detection
How to Correctly Iterate Through Getelementsbyclassname
Link Index.Html Client.Js and Server.Js
How Can JavaScript Upload a Blob
Fastest Method to Escape HTML Tags as HTML Entities
Get Pixel Color from Canvas, on Mousemove
Insert Ellipsis (...) into HTML Tag If Content Too Wide
Why Is the Value of My Input Always Empty If I Store It in a Variable
Event Detect When CSS Property Changed Using Jquery
Resize Html5 Canvas to Fit Window