亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

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

3 回答

?
蕭十郎

TA貢獻1815條經驗 獲得超13個贊

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


更改項目的類是一個更好的主意,但是您仍然遇到相同的問題,因為您要更改N個項目的屬性,該屬性可能很大。更好的解決方案可能是更改單個父項或少數父項上的類,然后使用css中的“層疊”命中目標項。這適用于大多數情況,但不是全部。


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


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


查看完整回答
反對 回復 2019-11-29
?
千萬里不及你

TA貢獻1784條經驗 獲得超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);

};

特點:


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

第一次調用后會創建一個樣式表setStyle,因此,如果您不調用它,則不會創建任何樣式表。

相同的樣式表可重復用于以下的 setStyle

該函數返回對與您添加的CSS束關聯的節點的引用。如果使用該節點作為第二個參數再次調用該函數,它將用新的CSS替換舊的CSS。


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

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

瀏覽器支持


至少它可以在IE9,FF3,Chrome 1,Safari 4,Opera 10.5上運行。


還有一個IE版本,可在現代瀏覽器和舊版本的IE上使用!(適用于IE8和IE7,但可能會使IE6崩潰)。


查看完整回答
反對 回復 2019-11-29
?
炎炎設計

TA貢獻1808條經驗 獲得超4個贊

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


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

內聯 jQuery .css樣式元素:它不會改變CSS的物理規則!如果您想這樣做,我建議您使用普通的JavaScript解決方案:


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

     #myID {

         myRule: myValue;

         myOtherRule: myOtherValue;

     }";

這樣,您將設置樣式表css規則,而不附加內聯樣式。


希望這可以幫助!


查看完整回答
反對 回復 2019-11-29
  • 3 回答
  • 0 關注
  • 764 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號