Блог

У меня есть ниже CSS и и есть один файл JavaScript, где я получаю значение свойства Width, скажем, 50 пикселей. Я хочу поместить это значение свойства JavaScript Width ниже 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 в значение свойства Width CSS.

Пожалуйста, помогите.

 element.style.width = '50px';
  

Где element — ссылка на элемент.

Вы не можете управлять внешним файлом с помощью javascript. Если ваш класс расположен во внешнем файле css, вы не можете это изменить. Что делают все разработчики, так это меняют классы, расположенные в текущем html-файле, или изменяют style атрибут

если вы хотите изменить правила таблицы стилей css для всех элементов, вы можете сделать это с помощью простого 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';
  

это способ сделать это

     //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);
}