變化寬度/高度

我有以下JS代碼改變取決於data-percentage HTML屬性的值的width：變化寬度/高度

var addRule = (function (sheet) { 
    if(!sheet) return; 
    return function (selector, styles) { 
    if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); 
    if (sheet.addRule) return sheet.addRule(selector, styles); 
    } 
}(document.styleSheets[document.styleSheets.length - 1])); 

var i = 101; 
while (i--) { 
    addRule("[data-percentage='" + i + "%']", "width:" + i + "%"); 
}

觀看演示：http://jsfiddle.net/YYF35/

相反width，對於一些我想改變他們的元素height。

如何更改代碼，以便根據div的類別更改元素的高度或寬度（取決於data-percentage屬性編號當然）？

我不希望創建一個不同的HTML屬性吧，像這樣：

while (i--) { 
    addRule("[data-percentage-width='" + i + "%']", "width:" + i + "%"); 
    addRule("[data-percentage-height='" + i + "%']", "height:" + i + "%"); 
}

jQuery的可以被使用。有任何想法嗎？

來源

2013-11-22 Alex

您是否真的需要修改樣式表，還是隻需更改元素？對於這個問題，爲什麼不把100條規則硬編碼到樣式表中呢？（好吧，如果你想分開寬度和高度，200條規則。）'div [data-percent-height = 1] .change-height {height：1％}'等等。 –

您的代碼添加規則。如果你真的想那麼做，只需添加更多的規則：

var i = 101; 
while (i--) { 
    addRule("[data-percentage='" + i + "%'].change-width", "width:" + i + "%"); 
    addRule("[data-percentage='" + i + "%'].change-height", "height:" + i + "%"); 
}

現在，隨着change-width類元素都會有自己width修改，並與change-height類元素都會有自己height修改（你可以使用兩者如果你喜歡）。

來源

2013-11-22 07:46:45

謝謝，它的工作原理。 – Alex

試試這個：

$("div[data-percentage]").each(function(){ 

    $(this).css({ 
     width: $(this).attr('data-percentage') 
     //height: $(this).attr('data-percentage') 
    }); 
});

http://jsfiddle.net/YYF35/1/

來源

2013-11-22 07:42:38 Andrew

再次查看代碼。它正在構建*樣式表*，而不是自己更改元素。 –

變化寬度/高度

回答

相關問題