仅使用JavaScript复制CSS规则

Duplicate a CSS rule using JavaScript only

本文关键字：CSS 规则 复制 JavaScript      更新时间：2023-09-26

我有一个在其他地方生成的列表，我无法更改它。缩进级别是via&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;
}

请参阅本文底部的更新，以获取通过JavaScript编辑CSS的参考

您可以用Javascript将CSS类添加到包含的li项中吗。您可以计算每个li中出现的&nbsp;的数量，并相应地为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(/&nbsp;/g) || []).length;
        $(this).addClass('whitespace' + numWhitespaces);
    });    
}
formatText('text12');

更新

这里提供了关于如何通过JavaScript操作样式表的详细解释：http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript#quickIDX1

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

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

我现在有了以下内容：

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。

相关文章：