首頁(yè) 猿問(wèn) 使用JavaScript /...

使用JavaScript / jQuery快速修改CSS類(lèi)屬性值

JavaScript JQuery Html/CSS

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

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

查看完整描述

3 回答

蕭十郎

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

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

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

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

jss是一個(gè)庫(kù)，可幫助簡(jiǎn)化從javascript直接編輯樣式表的過(guò)程。

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

千萬(wàn)里不及你

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

您可以使用以下功能：

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編寫(xiě)的，因此比jQuery替代品具有更好的性能。

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

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

該函數(shù)返回對(duì)與您添加的CSS束關(guān)聯(lián)的節(jié)點(diǎn)的引用。如果使用該節(jié)點(diǎn)作為第二個(gè)參數(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)行。

還有一個(gè)IE版本，可在現(xiàn)代瀏覽器和舊版本的IE上使用！（適用于IE8和IE7，但可能會(huì)使IE6崩潰）。

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

炎炎設(shè)計(jì)

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

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

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

”

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

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

#myID {

myRule: myValue;

myOtherRule: myOtherValue;

}";

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

希望這可以幫助！

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

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

關(guān)注

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

使用JavaScript / jQuery快速修改CSS類(lèi)屬性值

使用JavaScript / jQuery快速修改CSS類(lèi)屬性值

3 回答

相關(guān)問(wèn)題推薦

添加回答

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

熱搜

最近搜索清空

使用JavaScript / jQuery快速修改CSS類(lèi)屬性值

使用JavaScript / jQuery快速修改CSS類(lèi)屬性值

3 回答

相關(guān)問(wèn)題推薦

添加回答