首頁猿問使用JavaScript /...

使用JavaScript / jQuery快速修改CSS類屬性值

JavaScript JQuery Html/CSS

翻過高山走不出你 2019-11-29 15:03:17

到目前為止，我遇到了一種獨(dú)特的情況，我一直無法找到解決方案：將值動態(tài)分配給CSS樣式。我知道如何使用jQuery為元素分配寬度，高度等，但是我實(shí)際上想做的是更改樣式表中定義的值，以便可以將動態(tài)創(chuàng)建的值分配給多個元素。我要構(gòu)建的是一張圖像的幻燈片顯示，該圖像占據(jù)了整個視口，重新計算了圖像的寬度，高度和調(diào)整大小時的left屬性，以便圖像始終居中，偏愛寬度勝于高度，除非視口比它高寬（調(diào)整大小不會重新加載頁面，只會觸發(fā)調(diào)整圖像大小的功能）。我已經(jīng)成功地使它能夠在一張圖像上工作，現(xiàn)在我正在嘗試確定將那些屬性值分配給幻燈片中的所有圖像的最佳方法，而不必為每個圖像分別指定這三件事。我的問題：是否可以即時修改類中屬性的值？我確信答案就在那里，我可能只是在搜索中沒有使用正確的術(shù)語。希望我能很好地描述問題。TIA。

查看完整描述

3 回答

蕭十郎

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超13個贊

與這里的某些答案相反，使用Javascript編輯樣式表本身不僅可行，而且性能更高。簡單地這樣做$('.myclass').css('color: red')最終將遍歷匹配選擇器的每個項(xiàng)目，并分別設(shè)置style屬性。這確實(shí)效率不高，如果您有數(shù)百個元素，它將引起問題。

更改項(xiàng)目的類是一個更好的主意，但是您仍然遇到相同的問題，因?yàn)槟腘個項(xiàng)目的屬性，該屬性可能很大。更好的解決方案可能是更改單個父項(xiàng)或少數(shù)父項(xiàng)上的類，然后使用css中的“層疊”命中目標(biāo)項(xiàng)。這適用于大多數(shù)情況，但不是全部。

有時，您需要將很多項(xiàng)目的CSS更改為動態(tài)的，或者沒有辦法通過擊中少數(shù)父母來實(shí)現(xiàn)。更改樣式表本身，或添加一個小的新樣式表以覆蓋現(xiàn)有的CSS，是更改項(xiàng)目顯示的一種非常有效的方法。您只需要與DOM進(jìn)行一次交互，瀏覽器就可以真正有效地處理那些更改。

jss是一個庫，可幫助簡化從javascript直接編輯樣式表的過程。

反對回復(fù) 2019-11-29

千萬里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個贊

您可以使用以下功能：

function setStyle(cssText) {

var sheet = document.createElement('style');

sheet.type = 'text/css';

/* Optional */ window.customSheet = sheet;

(document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);

return (setStyle = function(cssText, node) {

if(!node || node.parentNode !== sheet)

return sheet.appendChild(document.createTextNode(cssText));

node.nodeValue = cssText;

return node;

})(cssText);

};

特點(diǎn)：

該函數(shù)是用vanilla-js編寫的，因此比jQuery替代品具有更好的性能。

第一次調(diào)用后會創(chuàng)建一個樣式表setStyle，因此，如果您不調(diào)用它，則不會創(chuàng)建任何樣式表。

相同的樣式表可重復(fù)用于以下的 setStyle

該函數(shù)返回對與您添加的CSS束關(guān)聯(lián)的節(jié)點(diǎn)的引用。如果使用該節(jié)點(diǎn)作為第二個參數(shù)再次調(diào)用該函數(shù)，它將用新的CSS替換舊的CSS。

例

var myCSS = setStyle('*{ color:red; }');

setStyle('*{ color:blue; }', myCSS); // Replaces the previous CSS with this one

瀏覽器支持

至少它可以在IE9，F(xiàn)F3，Chrome 1，Safari 4，Opera 10.5上運(yùn)行。

還有一個IE版本，可在現(xiàn)代瀏覽器和舊版本的IE上使用?。ㄟm用于IE8和IE7，但可能會使IE6崩潰）。

反對回復(fù) 2019-11-29

炎炎設(shè)計

TA貢獻(xiàn)1808條經(jīng)驗(yàn) 獲得超4個贊

好問題。這里的很多答案都提供了一個與您的要求直接矛盾的解決方案

“我知道如何使用jQuery為元素分配寬度，高度等，但是我實(shí)際上想做的是更改樣式表中定義的值，以便可以將動態(tài)創(chuàng)建的值分配給多個元素。

”

內(nèi)聯(lián) jQuery .css樣式元素：它不會改變CSS的物理規(guī)則！如果您想這樣做，我建議您使用普通的JavaScript解決方案：

document.styleSheets[0].cssRules[0].cssText = "\

#myID {

myRule: myValue;

myOtherRule: myOtherValue;

}";

這樣，您將設(shè)置樣式表css規(guī)則，而不附加內(nèi)聯(lián)樣式。

希望這可以幫助！

反對回復(fù) 2019-11-29

3 回答
0 關(guān)注
761 瀏覽

關(guān)注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

使用JavaScript / jQuery快速修改CSS類屬性值

使用JavaScript / jQuery快速修改CSS類屬性值

3 回答

相關(guān)問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

使用JavaScript / jQuery快速修改CSS類屬性值

使用JavaScript / jQuery快速修改CSS類屬性值

3 回答

相關(guān)問題推薦

添加回答