相关疑难解决方法(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>

我想<select>在用户调用函数changeCSS()之后更改display:block to display:none for ALL elements.

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

问题

哪个JavaScript框架(prototype,script.aculo.us,Mootools,MochiKit ......)具有不错的CSS规则编辑支持？

这是关于更改样式规则.我希望有动态的CSS类改变.例:

<style>
#answer, .reveal { display: none; color: blue; }
#answer { /* additional stuff */ }
</style>

现在,通过JavaScript,我想更改其中包含"display:none"的规则. - 我确信有时这是正确的方法; 当它不是正确的方法时,我不是在寻找替代方案.

哪个框架使以下内容变得简单:

1. 从所有规则中选择规则(例如"#answer,.reveal")
2. 所选规则对"显示"有什么价值？
3. 从规则中删除"display"属性

(2.和3.仅使用DOM很容易,只要我从框架中获得CSS规则的句柄)

框架不够好:

例如,YUI的StyleSheet一次只能在一张纸上搜索规则(有限,但对我来说足够了),但它不能像我的第一个例子那样显示,编辑或检索多选择器规则(对我来说太有限了).

YUI也无法获得单独的属性(底层DOM可以,但你无法通过YUI获得该结构).您可以单独删除"显示"属性,不过,如果你通过YUI手段得到规则的保持.

在dojox.html.styles下,Dojo有一些记录错误且不完整的东西

Ext JS有Ext.util.CSS.我检查了代码并在getRule()中发现了一个错误......否则选择器匹配(IE影响力不好)非常草率,这使得它对多选择器规则不利.它也无法通过API删除属性,但可以为您提供CSSRule,以便您自己完成. - CSS树行走尽可能原始:不降低媒体规则或导入.

PD:

$('.reveal').css(......等等......)不是答案,因为它根本不涉及CSS规则(它触及某些元素的CSS属性)!

我后看了这部视频NETTUTS,我在尝试所示的LESS.js方法很感兴趣.

除了显而易见的,"如果用户没有启用javascript怎么办？",或"将会有一个小的性能影响"...是否有这样的原因,这不能用于生产？

很少看起来像CSS应该是......

编辑:问题演变成如何优化大规模的CSS更改为700或更多的div.我将离开下面的旧问题来描述我原来的方法.

我有以下jQuery但它没有像我期望的那样表现.有大约700个div与类gr,所以隐藏它们需要一个明显的时间.我想做:

1. 单击"显示/隐藏发音"时,立即将该文本更改为"正在工作"
2. 等到隐藏/显示所有'div.gr'

3. "工作"可以追溯到"显示/隐藏发音"

   $(document).ready(function () {
    $('#togglePron').click(function() {
      $('#togglePron').html("Working...");
      $('div.gr').toggle();
      $('#togglePron').html("Show/hide Pronunciation");
     });
   });
   ...
   ... 
   <div class="pronlink" id="togglePron">Show/hide P</div>
   
   <div class="gr">hai</div><div class="zi">A</div>
   <div class="gr">nao</div><div class="zi">B</div>  
   etc.
   

   Run Code Online (Sandbox Code Playgroud)

感谢迈克伦蒂尼,这个问题有一个小问题.

这是我正在处理的整页

我观察到的行为是"显示/隐藏P"需要一个明显的时间来改变,然后它会短暂地改变为"工作",然后它会回到"显示/隐藏".那么jQuery将html()和.toggle()聚合在一起,而不是首先运行html()吗？

这似乎是浏览器特定的,因为在Opera中它做我想要的.在IE 7和Chrome 18中,行为如我所述.有没有办法让Chrome中我想要的行为发生？或者更好的方式来做我描述的事情？

我在我的项目中使用Bootstrap，我需要小包装器。我从 twitters 来源得到它，它看起来像：

section#my-content {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    margin: 15px 0;
    padding: 39px 19px 14px;
    position: relative;
}
section#my-content:after {
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #9DA0A4;
    content: "Example";
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 3px 7px;
    position: absolute;
    top: -1px;
}

那么是否可以使用 JS (jQuery) 或以某种方式content动态更改属性？

我有以下SASS代码

a.unfavorite{
  width: 20px;
  background-position: -71px -28px;
  text-decoration: none !important;
  &:before {
    content: "un-favorite";
    background: #000;
    color: #fff;
  }
 }

在JQuery中,我希望能够访问该:before元素以便对其进行修改.

我尝试过做这样的事情,$('.unfavorite:before')但没有结果.我做错了吗？