css id 选择器与元素 id 选择器通过 JavaScript 控制样式答案

【问题标题】：css id selector vs element id selector to control style via JavaScriptcss id 选择器与元素 id 选择器通过 JavaScript 控制样式
【发布时间】：2012-10-11 21:38:58
【问题描述】：

在我的代码中，所有表头都有一个 CSS 样式设置 - <th>

我没有为自己的 Css 进行设置，但直到现在对我来说还可以，所以我没有尝试编辑这些。

但现在我必须打印页面，并将字体颜色设置为#ffffff 它在背景上看起来确实不错，但在打印出来时它不会显示

我的css是这样制作的

    #TBLtime th , #TBLparam1 th , #TBLparam2 th
    {
    font-size:12px;
    text-align:right;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#ffffff;
    }

所以 id 选择器是每个元素的，你如何更容易地从 javascript 控制/修改

说我需要改变颜色属性。我将如何从 javascript 访问它？

    function DocPrnt() {
        document.getElementById(id).style.color = "black";
        print();
    }

有没有更好的选择让选择器更容易从 JS 访问或者这是常见的方法？

【问题讨论】：

为什么不使用不同的打印样式表？
@Tariqulazam 我也可以尝试一下（以供将来使用）听起来不错，尽管这里只是解决了颜色和问题
即使是单个元素，我也会使用打印样式表来节省一些时间。

标签： javascript asp.net css styles

【解决方案1】：

好吧，对于纯 JavaScript 解决方案，这可能有效：

function DocPrnt() {
    var headerCells = [],
        i = 0;
    headerCells = document.getElementsByTagName('th');
    for (i = 0; i < headerCells.length; i += 1) {
        headerCells[i].style.color = "#000000";
    }
    print();
}

就我个人而言，我只是添加一个新的样式表，仅用于打印：

<link rel="stylesheet" type="text/css" href="/print.css" media="print" />

【讨论】：

从这里看起来不错，感谢您的快速回复。现在我想我将只使用 js 以供将来参考，您在 print.css 中的代码将如何看起来或与具有不同值的默认 CSS 代码相同，但是控制整个想法的是什么设置一个显示然后另一个打印？或设置默认值，也许其中一个选项与我的显示示例一样，然后您的<link rel...> 来声明打印输出设置？
@LoneXcoder：media 属性是浏览器用来确定渲染设备的。 media="all" 适用于所有设备，media="print" 适用于打印设备，media="screen" 适用于显示器（等）。 “print.css”中的 CSS 只是普通的 CSS，尽管您可以尝试使用 @page 规则的分页媒体。 alistapart.com/articles/goingtoprint 是一篇非常好的文章。
感谢您的信息，如果您不介意皮特，我现在将编辑您的代码（将查看您的链接）谢谢伙计