Changing CSS properties via JavaScript

问题

I need a function to change the appearance of some elements in my HTML page "on the fly", but I am not able to do it.

The problem is that I cannot use a command like

document.write ('<style type="text/css">body {background-color: #cccccc;}</style>');

because I need to make the changes effective when the page is already loaded, using a link like

<a onmouseclick="Clicker(1)" href="#">clic</a>

and I cannot use a command like

document.body.style.background = '#cccccc';

because I do not know if it can be applied to other not so easy cases, because I need to change the appearance of elements such as td.myclass or sibling elements such as th[scope=col]+th[scope=col]+th[scope=col].

How can I do it? Thanks!

回答1:

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

回答2:

You can easily access and modify CSS propery of any DOM by setting properties of the style object. i.e. to change the background color of a DOM element with id of #yourid you do this

document.getElementById('yourid').style.backgroundColor = "#f3f3f3";

note that CSS properties that are made up of two names seperated by an hyphen, i.e background-color, font-size are turned into camelCase notation, i.e backgroundColor and fontSize while single worded properties retain their respective names

回答3:

You can use the id attribute for as many elements as you like, but they must be unique. You can also use the class attribute, but to find the specific element you want will be bit tougher.

Then, using JavaScript, you can use the document.getElementById function to retrieve the DOMElement object to set CSS properties on. For classes, you will need to first get all the elements with the specified tag name by calling document.getElementsByTagName, then iterating over the resulting array and checking if each element has the provided class name, and if it does, then adding to an array, which after the loop gets returned.

回答4:

document.getElementsByClassName('myclass')[NUMBER].style['background-color'] = '#ccc';

Example:

document.getElementsByClassName('myclass')[0].style['background-color'] = '#ccc';
document.getElementsByClassName('myclass')[1].style['background-color'] = '#ccc';

If you want change all td.myclass

var myObj = document.getElementsByClassName('myclass');
for(var i=0; i<myObj.length; i++){
  myObj[i].style['background-color'] = '#ccc';
}

回答5:

If you want to use complex selector like th[scope=col], use jQuery

回答6:

<html>
 <head>
  <style type="text/css">
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, ol, ul,
    li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
     font-family:Segoe UI, sans-serif;
    }
   .header, .container, .footer {
    min-height:100px;
   }
   .header {
    background-color:#757575;
   }
   .container {
       background-color:#cccccc;
   }
   .footer {
    background-color:#757575;   
   }
   .header, .footer, .column {
    text-align:center;
   }
   .column {
    float:left;
    min-width:300px;
    border-left:1px solid blue;
    border-right:1px solid blue;
    margin-left:10px;
   }
  </style>
  <script type="text/javascript">
   function headerContentFooter(headerRatio, footerRatio) {
    totalHeight = document.height;
    headerHeight = 0;
    containerHeight = 0;
    footerHeight = 0;
    if(headerRatio < 0.5 && footerRatio < 0.5) {
     headerHeight = totalHeight * headerRatio;
     footerHeight = totalHeight * footerRatio;
     containerHeight = totalHeight - (headerHeight + footerHeight);
     document.getElementsByClassName("header")[0].style.height = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.height = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.height = "" + footerHeight + "px";
     document.getElementsByClassName("header")[0].style.minHeight = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.minHeight = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.minHeight = "" + footerHeight + "px";
     document.getElementsByClassName("header")[0].style.maxHeight = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.maxHeight = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.maxHeight = "" + footerHeight + "px";
    }
   }
  </script>
 </head>
 <body>
  <div class="header">HEADER</div>
  <div class="container">
   <div class="column">LEFT</div><div class="column">CENTER</div><div class="column">RIGHT</div>
  </div>
  <div class="footer">FOOTER</div>
  <script type="text/javascript">
   headerContentFooter(0.05, 0.05);
  </script>
 </body>
</html>

来源：https://stackoverflow.com/questions/2441809/changing-css-properties-via-javascript

标签

javascript

css

stylesheet