使用 javascript 更改整个 CSS 类的样式

发布于 2025-01-02 21:37:47 字数 473 浏览 1 评论 0原文

有没有办法使用 javascript 更改 CSS 类的属性？

<style type="text/css">
  .fool select {
    display: block;
  }
</style>

<p class="fool">
  <select id="a" onchange="changeCSS()"> ... </select>
  <select id="b" > ... </select>
  <select id="c" > ... </select>
</p>

我想在用户调用函数changeCSS()后将所有

它看起来很简单，但我找不到方法来做到这一点......

原文

Is there a way to change an attribute of a CSS class using javascript?

<style type="text/css">
  .fool select {
    display: block;
  }
</style>

<p class="fool">
  <select id="a" onchange="changeCSS()"> ... </select>
  <select id="b" > ... </select>
  <select id="c" > ... </select>
</p>

I want to change display:block to display:none for ALL <select> elements after a user call function changeCSS().

It looks simple but I can't find a way to do this...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不知所踪 2025-01-09 21:37:48

我是这样做的：

//Broken up into multiple lines for your convenience
setTimeout
(
  function()
  {
    document.getElementById('style').innerHTML = 'p.myclass{display: none}';
  }, 5000
);

<!--Should this be separated into "<head>"?-->
<style id="style"></style>

<p>After 5 seconds:</p>
<p>This text won't be hidden,</p>
<p class="myclass">But this will,</p>
<p class="myclass">And so will this.</p>

<script>
	style = document.getElementById('style');
	setTimeout(function(){style.innerHTML = 'p.myclass{display: none}'}, 5000);
</script>

Here's how I'd do it:

//Broken up into multiple lines for your convenience
setTimeout
(
  function()
  {
    document.getElementById('style').innerHTML = 'p.myclass{display: none}';
  }, 5000
);

<!--Should this be separated into "<head>"?-->
<style id="style"></style>

<p>After 5 seconds:</p>
<p>This text won't be hidden,</p>
<p class="myclass">But this will,</p>
<p class="myclass">And so will this.</p>

<script>
	style = document.getElementById('style');
	setTimeout(function(){style.innerHTML = 'p.myclass{display: none}'}, 5000);
</script>

回复收藏 0 原文

放我走吧 2025-01-09 21:37:48

要获得相同的效果，您可以制作另一种样式：

<style type="text/css">
  .fool select {
    display: block;
  }
  .foolnone select {
    display: none;
  }
</style>

并将

的类更改为foolnone。

否则，您必须遍历

的每个子级并更改类。如果这就是您想要的方式，可能最好使用一些库，例如 jquery。有了它，您可以执行以下操作：

<style>
.fool select.displaynone {
   display: none
}

$('.fool>select').toggleClass('displaynone')

请参阅此 jsfiddle 以获取工作示例：

http://jsfiddle.net/3ujau /1/

这显示了上述两种方法（即隐藏整个

并隐藏每个

To get the same effect, you can make another style:

<style type="text/css">
  .fool select {
    display: block;
  }
  .foolnone select {
    display: none;
  }
</style>

and change the class of <p> to foolnone.

Otherwise, you'd have to go through each of the children of <p> and change the class. If that's the way you want to go, probably probably best to use some library, such as jquery. With it, you can do something like:

<style>
.fool select.displaynone {
   display: none
}

$('.fool>select').toggleClass('displaynone')

See this jsfiddle for a working example:

http://jsfiddle.net/3ujau/1/

This shows both above approaches (i.e. hiding the whole <p> and hiding each of the <select>s.

回复收藏 0 原文

清眉祭 2025-01-09 21:37:48

我认为如果这样写的话会起作用：

var elements = document.getElementsByTagName('select');
for(var i = 0; i < elements.length; i++){
    elements[i].style.display = 'none';
}

I think it would work if instead put like this:

var elements = document.getElementsByTagName('select');
for(var i = 0; i < elements.length; i++){
    elements[i].style.display = 'none';
}

回复收藏 0 原文

氛圍 2025-01-09 21:37:48

 for(var elements = document.getElementsByTagName('select'), i = elements.length; i--)
     elements[i].style.display = "none";

 for(var elements = document.getElementsByTagName('select'), i = elements.length; i--)
     elements[i].style.display = "none";

回复收藏 0 原文

荒芜了季节 2025-01-09 21:37:47

您可以修改样式规则，但这通常不是最佳的设计决策。

要访问样式表定义的样式规则，请访问 document.styleSheets 集合。该集合中的每个条目都将具有一个名为 cssRules 或 rules 的属性，具体取决于浏览器。其中每一个都将是CSSRule 实例。您可以通过更改其 cssText 属性来更改规则。

但同样，这可能不是解决问题的最佳方法。但这是你问题的字面答案。

解决该问题的最佳方法可能是在样式表中添加另一个类来覆盖先前规则的设置，然后将该类添加到 select 元素或它们的容器中。例如，您可以制定规则：

.fool select {
    display: block;
}
.fool.bar select {
    display: none;
}

...当您想要隐藏选择时，将 "bar" 类添加到具有 "fool" 的容器中> 类。

或者，将 CSS 样式信息直接应用于元素。

You can modify style rules, but it's usually not the best design decision.

To access the style rules defined by style sheets, you access the document.styleSheets collection. Each entry in that collection will have a property either called cssRules or rules depending on the browser. Each of those will be a CSSRule instance. You can change the rule by changing its cssText property.

But again, that's probably not the best way to solve the problem. But it is the literal answer to your question.

The best way to solve the problem is probably to have another class in your stylesheet that overrides the settings of the previous rule, and then to add that class either to the select elements or to the container of them. So for instance, you could have the rules:

.fool select {
    display: block;
}
.fool.bar select {
    display: none;
}

...and when you want to hide the selects, add the "bar" class to the container that has the "fool" class.

Alternately, apply CSS style information directly to elements.

回复收藏 0 原文

所有深爱都是秘密 2025-01-09 21:37:47

关键是为额外的类定义额外的规则并将这些类添加到元素中，而不是为给定的样式规则重写规则。

function changeCSS() {
  var selects = document.getElementsByTagName("select");
  for(var i =0, il = selects.length;i<il;i++){
     selects[i].className += " hidden";
  }
}

CSS

.fool select.hidden, select.hidden {
   display: none;
}

或者一个真正有效的方法（但可能也需要一些更具体的样式规则）

function changeCSS() {
  document.getElementsByTagName("body")[0].className += " hideAllSelects"
}

CSS

body.hideAllSelects select {
   display: none;
}

The key is to define extra rules for additional classes and add these classes to the elements rather than to rewrite the rules for a given style rule.

function changeCSS() {
  var selects = document.getElementsByTagName("select");
  for(var i =0, il = selects.length;i<il;i++){
     selects[i].className += " hidden";
  }
}

CSS

.fool select.hidden, select.hidden {
   display: none;
}

Or for a really efficient method (but which might need a few more specific style rules too)

function changeCSS() {
  document.getElementsByTagName("body")[0].className += " hideAllSelects"
}

CSS

body.hideAllSelects select {
   display: none;
}

回复收藏 0 原文

苍景流年 2025-01-09 21:37:47

我直接访问 CSS 类来同时调整一堆 div 的高度。我就是这样做的：

function cssrules() {
    var rules = {};
    for (var i=0; i<document.styleSheets.length; ++i) {
        var cssRules = document.styleSheets[i].cssRules;
        for (var j=0; j<cssRules.length; ++j)
            rules[cssRules[j].selectorText] = cssRules[j];
    }
    return rules;
}

function css_getclass(name) {
    var rules = cssrules();
    if (!rules.hasOwnProperty(name))
        throw 'TODO: deal_with_notfound_case';
    return rules[name];
}

然后你可以执行类似 css_getclass('.classname').style.background="blue" 的操作。我只在 Windows 版 chrome 上尝试过这个，祝其他浏览器好运。

I'm accessing CSS classes directly to adjust the height of a bunch of divs simultaneously. This is how I'm doing it:

function cssrules() {
    var rules = {};
    for (var i=0; i<document.styleSheets.length; ++i) {
        var cssRules = document.styleSheets[i].cssRules;
        for (var j=0; j<cssRules.length; ++j)
            rules[cssRules[j].selectorText] = cssRules[j];
    }
    return rules;
}

function css_getclass(name) {
    var rules = cssrules();
    if (!rules.hasOwnProperty(name))
        throw 'TODO: deal_with_notfound_case';
    return rules[name];
}

and then you can do something like css_getclass('.classname').style.background="blue". I only tried this on chrome for windows, good luck with other browsers.

回复收藏 0 原文

萝莉病 2025-01-09 21:37:47

您可以编辑样式表，
但我认为你只需创建一个新类即可。
如果你真的需要这样做，试试这个。

    ss=document.styleSheets[0]

cssRules 是样式表规则

    ss.cssRules
    ss.cssRules[0]

第一个规则的选择器

    ss.cssRules[0].selectorText

    ".channel > li"

读取第一条规则的样式

    ss.cssRules[0].style

    CSS2Properties { "margin-left" → "0px"}

更改样式

    ss.cssRules[0].style.marginLeft="15px"

    ss.cssRules[0].style

CSS2Properties { "margin-left" → "15px" }

You can edit the style sheets,
but I would think you would just create a new class instead.
If you really need to do it, try this.

    ss=document.styleSheets[0]

cssRules Are the style sheet rules

    ss.cssRules
    ss.cssRules[0]

Selector for the first rule

    ss.cssRules[0].selectorText

    ".channel > li"

Read the style of the first rule

    ss.cssRules[0].style

    CSS2Properties { "margin-left" → "0px"}

Change the style

    ss.cssRules[0].style.marginLeft="15px"

    ss.cssRules[0].style

CSS2Properties { "margin-left" → "15px" }

回复收藏 0 原文

~没有更多了~

关于作者

雪花飘飘的天空

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

使用 javascript 更改整个 CSS 类的样式

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

寻梦旅人

冰美式不加糖

m0_51416705

123456wqwqwq

qq_R47skh

hs1283

友情链接

使用 javascript 更改整个 CSS 类的样式

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

寻梦旅人

冰美式不加糖

m0_51416705

123456wqwqwq

qq_R47skh

hs1283

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。