更新

Question

我有一个在别处生成的列表，我无法改变它。缩进级别是通过＆amp;但是，每个缩进的font-size是相同的，我想根据缩进级别更改font-size。因此，我需要复制一条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的参考

~~您可以将包含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(/&nbsp;/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。

仅使用JavaScript复制CSS规则

3 个答案:

更新