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

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

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


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


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


你的意思是想换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>

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


可以通过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进行切换。


el.style.width = '20px' ?


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

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

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

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

【热门文章】
【热门文章】