使用DOM样式使用Javascript获取或更改CSS类属性

Question

使用DOM样式使用Javascript获取或更改CSS类属性

我的目标是更改表中列的背景颜色,而不是按ID或名称单独寻址每个数据条目.我知道有几种方法可以做到这一点,我已经尝试过3个确切的方法,而且每个方法都有问题.为了简单和清晰起见,在这个问题中,我问如何使用DOM中的element.style.backgroundColor对象成功地完成它.这是我的HTML:

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="tester.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript" src="tester.js"></script> 
    </head>
    <body>
    <button type="button" onClick="testerFunction()">Test</button>
        <table>
            <tr>
                <th class="col1">Column 1 Header</th>
                <th class="col2">Column 2 Header</th>
            </tr>
            <tr>
                <td class="col1">R1 C1</td>
                <td class="col2">R1 C2</td>
            </tr>
            <tr>
                <td class="col1">R2 C1</td>
                <td class="col2">R2 C2</td>
            </tr>
        </table>
     </body>
 </html>

Run Code Online (Sandbox Code Playgroud)

我的CSS文件:

.col1{
    background-color:lime;  
}

Run Code Online (Sandbox Code Playgroud)

和我的Javascript文件:

function testerFunction() {
    alert (document.getElementsByClassName('.col1').style.backgroundColor);  
}

Run Code Online (Sandbox Code Playgroud)

当我运行它时,我在IE,Firefox和Chrome中得到大致相同的错误:

无法读取Undefined属性'backgroundColor'.

我觉得它与document.getElementsByClassName DOM对象返回的数据类型有关.引用的网站说它返回一个HTMLcollection.我发现的其他地方说它返回了元素的"列表".我尝试制作一个数组并将结果分配给数组并使用循环访问数组中的每个元素,但在同一个地方得到了相同的错误.可能是因为我不知道如何处理"集合".无论如何,我期待,"石灰"或十六进制或rgb等价,因为这是我在CSS文件中定义的.我希望能够用Javascript更改它.任何帮助将非常感激.谢谢!

编辑:为Shylo Hana的答案添加了参数,使其更加模块化

function testerFunction() {
    changeColumnColor('col1','blue');
}
function changeColumnColor(column,color) {
    var cols = document.getElementsByClassName(column);
    for(i=0; i<cols.length; i++) {
      cols[i].style.backgroundColor = color;
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 44

正如Quynh Nguyen所说,你不需要'.' 在className中.但是 - document.getElementsByClassName('col1')将返回一个对象数组.这将返回"未定义"值,因为数组没有类.你仍然需要遍历元素......

function changeBGColor() {
  var cols = document.getElementsByClassName('col1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blue';
  }
}

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 11

我认为这不是最好的方法，但在我的情况下，其他方法不起作用。

stylesheet = document.styleSheets[0]
stylesheet.insertRule(".have-border { border: 1px solid black;}", 0);

Run Code Online (Sandbox Code Playgroud)

来自https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript 的示例

Answer 3

Joh*_*ria 6

也许更好document.querySelectorAll(".col1")，因为getElementsByClassName在 IE 8 中不起作用，但querySelectorAll可以（尽管仅适用于 CSS2 选择器）。

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

归档时间：	12 年，2 月前
查看次数：	143217 次
最近记录：	6 年，6 月前