javascript - 仅使用 JavaScript 复制 CSS 规则

Question

我有一个在别处生成的列表，我无法更改它。缩进级别是通过  ，但是每个缩进的字体大小都是相同的，我想根据缩进级别更改字体大小。因此，我需要复制一个 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

有关通过 JavaScript 编辑 CSS 的引用，请参阅本文底部的更新

你能用 Javascript 添加一个 CSS 类到包含 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