javascript value to css

Question

我在CSS下面有一个JavaScript文件，我在其中获得Width属性值，例如50px。我想把JavaScript Width属性Value放在CSS下面

.carpe_slider_slitss {
    BORDER-LEFT: #5256BB 1px solid; WIDTH: 100px; COLOR: #5256BB;
}

所以上面的 CSS 应该看起来像

.carpe_slider_slitss {
    BORDER-LEFT: #5256BB 1px solid; WIDTH: 50px; COLOR: #5256BB;
}

那么，如何将该JavaScript值传递给CSS的Width属性值。

请帮忙。

Answer 1

element.style.width = '50px';

其中element是对元素的引用。

Answer 2

你不能通过javascript操作外部文件。如果您的类位于外部 css 文件中，则无法更改它。所有开发人员所做的是更改位于当前html文件中的类或更改style属性

Answer 3

如果你想改变所有元素的css styleSheet规则，你可以使用简单的javascript来做到这一点：

function findCssRule(cssSelectorName)    
{
     var stylesheets  = document.styleSheets;
     for(var i = 0, ii = stylesheets.length;i<ii;i++)
     {
         for(var j = 0, jj = stylesheets[i].rules.length;j<jj;j++)
         { 
             if(stylesheets[i].rules[j].selectorText == cssSelectorName)
             {
                 return stylesheets[i].rules[j];
             }
         }
     }
     return null;
}
//set the width to 80px for '.carpe_slider_slitss' css rule
var cssRule = findCssRule('.carpe_slider_slitss');
if(cssRule!=null)
    cssRule.style.width = '80px';

Answer 4

这是一种

方法。

    //ether create a new style sheet
var style = document.createElement ("style");
document.getElementByTagName('head')[0].appendChild(style);
    //or find a document you want to edit
    //ether local
var style = document.getElementByTagName('style')[0];
    //or imported
var style = document.getElementByTagName('style')[0];
style = style.sheet ? style.sheet : style.styleSheet;
if(style.insertRule){
         //insertRule('your css code',new rule index);
    style.insertRule('carpe_slider_slitss{ width: 50px; }', style.cssRules.length); //You can use 0 to insert your rule at the start of the style
}else{   //this is the ie < 9 way
    style.addRule('carpe_slider_slitss', 'width: 50px', style.cssRules.length);
}