仅使用 JavaScript 复制 CSS 规则

Question

我有一个在其他地方生成的列表，我无法更改它。 缩进级别是通过  ，但是每个缩进的字体大小是相同的，我想根据缩进级别更改字体大小。 因此，我需要复制一个 css 规则并更改新的 id 和 font-size。

以下是 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 的参考，请参阅本文底部的更新

你能在包含li 的项目中添加一个带有Javascript 的CSS 类吗？ 您可以计算每个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 2

AFAIK，您不能使用 javascript 复制 CSS 规则。您只能在元素上应用某种样式，但这将应用于内联样式。因此，您可以通过应用内联样式来更改它或尝试其他方式。

我只知道 jquery 的做法，那就是使用 $('.className').css('font', 'somefont')

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。