如何將新規則添加到現有的CSS類

在下面的代碼中，我已經說明了我正在嘗試實現的內容... 通過向其添加新規則來更改現有的CSS類。如何將新規則添加到現有的CSS類

<head> 
<style> 

h4.icontitle 
{font-size: 22pt;} 

</style> 
</head> 
<body> 
<script type="text/javascript"> 

textpercent = 84; 
document.styleSheets[1].cssRules.['h4.icontitle'].style.setProperty('-webkit-text-size-adjust', textpercent+'%', null); 

</script> 

<h4> hello </h4> 

</body>

這是用於在不同尺寸的屏幕上運行的網站的預處理元素。其結果將是...

h4.icontitle 
{font-size: 22pt; 
-webkit-text-size-adjust:84%;}

檢查DOM時，這將是可見的。

任何想法將是最受歡迎的。僅限Javascript - 這裏沒有JQuery ...

已解決。

大量的試驗和錯誤之後，這裏是一個工作功能，允許JavaScript直接插入樣式到CSS

function changeCSS(typeAndClass, newRule, newValue) 
{ 
    var thisCSS=document.styleSheets[0] 
    var ruleSearch=thisCSS.cssRules? thisCSS.cssRules: thisCSS.rules 
    for (i=0; i<ruleSearch.length; i++) 
    { 
     if(ruleSearch[i].selectorText==typeAndClass) 
     { 
      var target=ruleSearch[i] 
      break; 
     } 
    } 
    target.style[newRule] = newValue; 
}

與

changeCSS("h4.icontitle","backgroundColor", "green");

希望別人叫會發現這是一個有用的方法在純CSS中使用CSS中的變量。

來源

2013-08-24 TJS101

ü要使用JavaScript或jQuery的儀式改變CSS？ – iJade

爲什麼不使用jQuery或類似的庫？ '$（'h4.icontitle'）.css（' - webkit-text-size-adjust'，textpercent +'％'）;' –

Javascript only please。在這個網站沒有圖書館（到目前爲止）。 – TJS101

我把一個例子在一起要適應您的需求

DEMO jsFiddle

// this gets all h4 tags 
var myList = document.getElementsByTagName("h4"); // get all p elements 

// this loops through them until it finds one with the class 'icontitle' then it assigns the style to it 
var i = 0; 
while(i < myList.length) { 
    if(myList[i].className == "icontitle") { 
     myList[i].style.color="red"; 
    } 
    i++; 
}

來源

2013-08-24 20:09:43 Vector

我現在有一個類似的方法。查看我對這個問題的編輯。 – TJS101

邏輯完全相同，很高興我能提供幫助。 – Vector

如果我的答案有幫助，可以將其標記爲正確，謝謝。 – Vector

嘗試這段代碼

$('h4.icontitle').css('-webkit-text-size-adjust','84%');

來源

2013-08-24 18:56:34 iJade

我沒有使用JQuery。只是JS。這看起來不錯。什麼是JS Equivalent？ – TJS101

什麼重要和複雜的普通JS是這樣的：'$（'h4.icontitle'）'。爲什麼？你基本上需要遍歷整個DOM樹，並找到所有具有該類的h4標籤並構建它們的列表。 –

查看原始問題中的代碼片段。這就是我想要工作。 – TJS101

/** 
Use this to update style tag contents 
**/ 
var css = 'h1 { background: grey; }', 
head = document.getElementsByTagName('head')[0], 
style = document.createElement('style'); 

style.type = 'text/css'; 
if (style.styleSheet){ 
    style.styleSheet.cssText = css; 
} else { 
    style.appendChild(document.createTextNode(css)); 
} 

head.appendChild(style);

要與身體使用querySelector內的元件工作，以針對在他們的CSS標識符元素。這會幫助你 https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

var el = document.querySelector(".icontitle"); 
el.setAttribute("style","-webkit-text-size-adjust:84%");

或者你可以準備一個CSS片段，並用它有條件例如：如果「new_css」是新的變化，然後

/**css code in style tag**/ 
.icontitle{ 

    /**style at initial stage**/ 

} 
.icontitle-new-modified{ 

/**modified css style at later stage**/ 

} 

//after a condition is satisfied 
el.setAttribute("class","icontitle-new-modified");

來源

2013-08-24 19:30:49

document.querySelector（「。icontitle」）返回一個空值。你確定這是正確的嗎？謝謝。 – TJS101

是的，它的工作檢查這個http://jsfiddle.net/mRRs5/ –

啊。它針對的是元素，而不是CSS。我需要這個來改變頭部中的CSS。請在原始問題中查看所需的輸出。 – TJS101

此功能適用於我的網站。

function changeCSS(typeAndClass, newRule, newValue) 
{ 
    var thisCSS=document.styleSheets[0] 
    var ruleSearch=thisCSS.cssRules? thisCSS.cssRules: thisCSS.rules 
    for (i=0; i<ruleSearch.length; i++) 
    { 
     if(ruleSearch[i].selectorText==typeAndClass) 
     { 
      var target=ruleSearch[i] 
      break; 
     } 
    } 
    target.style[newRule] = newValue; 
}

調用與

changeCSS("h4.icontitle","backgroundColor", "green");

來源

2013-08-24 21:53:43 TJS101

如何將新規則添加到現有的CSS類

回答

相關問題