僅使用JavaScript複製CSS規則

Question

我有一個在別處生成的列表，我無法更改。 縮進級別通過& nbsp;，但是每個縮進的字體大小是相同的，我想根據縮進級別改變字體大小。 因此，我需要複製一個css規則並更改新的id和字體大小。

下面是HTM生成的代碼，這是我無法改變：

<style type="text/css"> 
    span.text12Font1 { 
     font-size:14px; 
     font-family:"Arial", sans-serif; 
     color:#010101; 
     font-weight:normal; 
     font-style:normal; 
     text-decoration:normal; 
    } 
</style> 

<div id="text12"> 
</a> 
<ul style="margin-left:4px;text-align:left;" > 
    <li> 
     <span class="text12Font1">Emphasize the beginning of the bullet point</span> 
    </li> 
    <li> 
     <span class="text12Font1">&nbsp;</span > 
     <span class="text12Font1">As in this list, when the first few words capture the main idea</span > 
    </li> 
    <li> 
     <span class="text12Font1">&nbsp;&nbsp;That way, readers can skim easily</span> 
    </li> 
</ul> 
</div> 

我可以得到每一個點，我可以找到所有在每個點的類名。 我需要的是能夠複製一個CSS類，給它一個新的ID，只是改變字體大小。

我見到目前爲止以下內容：

function getNewClassName(className, newName, fSize){ 
    var spanID = 'span.' + className; 
//e.g.: span.text12Font1 
    for(var i=0; i<document.styleSheets.length; i++){ 
     var sheet = document.styleSheets[i]; 
     var cssText = sheet.ownerNode.innerText; 
     var posn = cssText.indexOf(spanID); 
     if(posn!=-1){ 
      var oSheet = document.styleSheets[i]; 
      var oRules = oSheet.cssRules ? oSheet.cssRules : oSheet.rules; 
      for(var r=0; r<oRules.length; r++){ 
       if(oRules[r].cssText.indexOf(spanID)!=-1){ 
// Here I have the rule that I want to duplicate, change it's name to newName and change the font-size. 
// I must not change the existing rule and it must remain as it could be used elsewhere 
        return true; 
       } 
      } 
     } 
    } 
    return false; 
} 

Answer 1

AFAIK，你不能重複使用javascript CSS規則。您只能在元素上應用某種樣式，但會在內聯樣式中應用。因此，您可以通過應用內聯樣式或嘗試其他方法來更改它。

我只知道這樣做的jQuery的方式，那就是通過使用$('.className').css('font', 'somefont')

Answer 2

請參閱本崗位的底部，通過JavaScript的一個參考編輯CSS更新

你能添加一個CSS類用Javascript加入包含 li項目。 您可以統計每個 li中出現的  的數量，並相應地給 li一個CSS類。

事情是這樣的： http://jsfiddle.net/ncdajzur/

CSS

span.text12Font1 { 
    font-size:14px; 
    font-family:"Arial", sans-serif; 
    color:#010101; 
    font-weight:normal; 
    font-style:normal; 
    text-decoration:normal; 
} 

.whitespace1 span.text12Font1 { 
    font-size: 12px; 
} 

.whitespace2 span.text12Font1 { 
    font-size: 8px; 
} 

的JavaScript（我使用jQuery的快速測試）

function formatText(id) { 
    var $list = $('#' + id); 

    $list.find('li').each(function(i) { 
     var numWhitespaces = ($(this).html().match(/ /g) || []).length; 
     $(this).addClass('whitespace' + numWhitespaces); 
    });  
} 

formatText('text12'); 

更新

如何通過JavaScript操作樣式廣泛的解釋，請訪問： http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript#quickIDX1

Answer 3

我現在有以下幾點：

function duplicate_cssRule(passClassID, newClassID, fSize){ 
    var nClassID = 'span.' + newClassID; 
    if(findCSS_Rule(nClassID)) return true; // Must have already done this one 
    var classID = 'span.' + passClassID.split(' ')[0]; // Might have multiple classes, we always want the first 
    var ruleObj = findCSS_Rule(classID) 
    if(!ruleObj) return false; 
    var cssText = ruleObj.cssText ? ruleObj.cssText : ruleObj.style.cssText; 
    var posn = cssText.indexOf('{'); 
    cssText = cssText.substr(posn+1).trim().split(';'); 
    for(var i=0; i<cssText.length; i++){ 
     var fontData = cssText[i].toLowerCase().trim(); // IE is uppercase 
     if(fontData.substr(0,10)=='font-size:'){ 
      cssText[i] = 'font-size:' + fSize + 'px'; 
      break; 
     } 
    } 
    cssText = cssText.join(';'); 
    cssText = cssText.substr(0,cssText.length-1); 
    if(styleSheet.insertRule){ 
     cssText = nClassID + ' {' + cssText + '}'; 
     styleSheet.insertRule(cssText,styleSheet.cssRules.length); 
    }else if(styleSheet.addRule){ 
     styleSheet.addRule(nClassID,cssText); 
    } 
    return true; 
} 

var styleSheet; 
function findCSS_Rule(classID){ 
    var sheets = document.styleSheets; 
    for(var i=0; i<sheets.length; i++){ 
     styleSheet = sheets[i]; 
     var styleRules = styleSheet.cssRules ? styleSheet.cssRules : styleSheet.rules; 
     if(styleRules){ 
      for(var r=0; r<styleRules.length; r++){ 
       if(styleRules[r].selectorText&&styleRules[r].selectorText.toLowerCase()==classID.toLowerCase()) return styleRules[r]; 
      } 
     } 
    } 
    return false; 
} 

作品在所有瀏覽器，甚至IE8。