javascript - 求教，大写们原生JS有没得办法直接修改CSS样式表里面的属性值呀

Question

1、比如我选中某个p好后，通过className获取到了CSS样式表里面的某个类；然后我想把这个类里面的width的值修改为自己想要的数字，如原来是width:10px,我想修改为width:20px；大神们原生JS有没得办法做到呀。
注：不是直接改行间样式哈，而是用JS改外链样式表里面的样式。

Answer 1

可以通过document.styleSheets修改。

<STYLE TYPE="text/css" > 
.redText {color: red;} 
#pid {color: red;} 
</STYLE > 
<P id="redText" CLASS="redText" >11 </p > 
<P id="pid" >22 </p > 
<input type="button" onclick="test()" value=" test " />
<script language="javascript" type="text/javascript" > 
function test()
{
    var ss = document.styleSheets[0];
    var rules = ss.rules?ss.rules:ss.cssRules
    for(var i=0;i<rules.length;i++)
    {
        if(rules[i].selectorText=="#pid")
        {
            rules[i].style.color="yellow";
            break;
        }
    }
     
     
}
</script> 

不建议直接修改，最好是外链css里写好具体要切换的样式列表，然后用js进行切换。

Answer 2

el.style.width = '20px' ？

Answer 3

你的意思是想换css文件还是想修改css文件？
假如要修改css文件内的内容前台可能做不到，要后台用io读写文件来改服务器上的文件。

如果是更换外联的css文件就

通常情况下，我们可以通过改变外链样式的的href的值实现网页样式的实时切换，也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id，如
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css"/> 调用时很简单，如
<span on click="javascript:document.getElementById('css').href ='ie.css'">点我改变样式</span>

其实改行间样式不就好了嘛？你的需求是什么呢？

Answer 4

document.getElementById("").style.width = "20px"; // px这个单位必须要，否则你会说我坑你

Answer 5

按照你的需求，暂有三个解决方法，你选一个可用的吧，不过，不建议这样去修改，想想都累：

1. 动态增删 style 标签，标签中通过重新定义对应的css类，来进行属性覆盖；

2. 通过遍历所有使用此类的元素，修改行内值；

3. 自己定义一套样式表，在应用类的地方追加一个自己的类。

Answer 6

引用外面的改不了。
内部样式是可以改的，就是你直接写在网页里面<style>标签里面是可以改的。
具体来说，就是document.styleSheets这里面的规则，封装一个类，自行操作吧