Значение javascript для css

Question

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

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

Answer 1

element.style.width = '50px'; 

Место, где element - ссылка на элемент.

Answer 2

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

Answer 3

, если вы хотите изменить правила таблицы стилей 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'; 

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