需要Javascript语法来引用CSS类而不是HTML元素

Need Javascript syntax to reference a CSS class instead of HTML element

本文关键字：HTML 元素 CSS Javascript 语法 引用 需要      更新时间：2023-09-26

我在网上搜索引用CSS类而不是HTML元素的正确语法，但找不到任何有用的东西。

我想修改下面的代码，以引用类buy_content"DIV.buy_content"的任何DIV，而不是body元素。

<a href="#" onclick="body.style.fontSize='1em'; set_cookie('page_size', '1', 30);">Small Text</a>
<a href="#" onclick="body.style.fontSize='2em'; set_cookie('page_size', '2', 30);">Medium Text</a>
<a href="#" onclick="body.style.fontSize='3em'; set_cookie('page_size', '3', 30);">Large Text</a>

您所要求的内容没有"JavaScript语法"。较新的浏览器支持名为"getElementsByClassName"的API，因此您可以这样做：

function setSize(sz) {
  var elements = document.getElementsByClassName('buy_content');
  for (var i = 0; i < elements.length; ++i) {
    if (elements[i].tagName === 'DIV')
      elements[i].style.fontSize = sz;
  }
}
<a href='#' onclick='setSize("1em"); set_cookie(...);'>Small</a>

您可以在此处找到"getElementsByClassName"支持的"补丁"。

<a href="#" class="clickie size-1" >Small text </a>
<a href="#" class="clickie size-2" >Medium text </a>
<a href="#" class="clickie size-3" >Large text </a>

您应该更改标记，使其不依赖于内联javascript。

// bind the event handler to all <a> tags
var as = document.getElementsByTagNames("a");
for (var i = 0, ii = as.length; i < ii; i++) {
    as[i].onclick = setText;
}
function setText(ev) {
    // get the em size from the class
    var size = /[.]*text-(['d][.]*)/.exec(ev.target.className)[1]
    var divs = document.querySelectorAll("div.buy_content");
    // set the style on all divs.
    for (var i = 0, ii = divs.length; i < ii; i++) {
        divs[i].style.fontSize = size + "em";
    }
}

浏览器支持（主要是IE7及更低版本）存在问题，因此您需要更多的样板文件才能使其正常工作。

使用内联和库存JavaScript不能真正做到这一点（容易/易读/干净），因为JavaScript DOM API不提供引用CSS类的方法，因为它不是DOM的一部分。您必须使用应用了该类的HTML元素来填充数组或列表，然后对集合进行迭代。

JQuery提供了选择器和迭代器，使其变得非常简单，但如果不能使用库，那么内联不是一个好主意。将其放入脚本块或外部.js文件中的函数中。

编辑：

一些人指出querySelectorAll，它将按类选择，但从我所读到的内容来看，它并不是完全跨平台的（在IE 8以下的IE上不起作用）。

此外，为了澄清我最初的帖子，当我说DOM API不允许按类访问元素时，我的意思是它不能用DOM遍历来完成。querySelectAll或JQuery选择器使用检查元素及其属性、检索对象和填充集合的函数执行DOM遍历。即使getElementById也执行属性检查。回想起来，我想这是一个没有意义的问题，但由于他在原始代码中没有使用选择器或属性查询，我认为他在问是否有像他目前使用的那样简单的JS语法。这就是我提到函数的原因。在我看来，即使是像getElementById这样的东西也是一个函数，因为它是一个函数。

我相信你想要的是insertRule（这正是你所要求的）：

document.styleSheets[document.styleSheets.length-1].insertRule('div.buy_content {font-size: 1em}',document.styleSheets[document.styleSheets.length-1].length)

document.styleSheets[document.styleSheets.length-1]是您的最后一个样式表。新规则将进入索引document.styleSheets[document.styleSheets.length].length

http://www.quirksmode.org/dom/w3c_css.html#t22

还有。。。deleteRule:

http://www.quirksmode.org/dom/w3c_css.html#t21

但是，更好的方法是获取ElementsByClassName，循环遍历它们，检查它们的nodeName是否为"DIV"，然后以老式的方式应用样式。

利用CSS为您做选择工作：

body.smalltext  .buy_content { font-size: 1em; }
body.mediumtext .buy_content { font-size: 2em; }
body.largetext  .buy_content { font-size: 3em; }
...
<input type="button" value="Small text"  id="smalltext"/>
<input type="button" value="Medium text" id="mediumtext"/>
<input type="button" value="Large text"  id="largetext"/>
...
document.getElementById('smalltext').onclick= function() {
    document.body.className= 'smalltext';
};
document.getElementById('mediumtext').onclick= function() {
    document.body.className= 'mediumtext';
};
document.getElementById('largetext').onclick= function() {
    document.body.className= 'largetext';
};

我的第一个建议回答您的确切问题：

如果你的项目范围比这件事更大：

  1. 下载jQuery

  2. 使用代码：

    $('div.buy_content')

    它返回一个jQuery数组对象，该对象包含您可以进一步操作的所有div。

我的第二个建议基于更深入地思考你要做的事情：

要么完全替换脚本中的样式表，要么修改现有样式表以更改样式。不要遍历文档中的所有DIV并更改其样式分配，而是更改其已分配样式的含义。

相关文章：