如何使用 JavaScript 修改 CSS 類？

Question

我知道如何在單個標簽上應用 css（或更改其上的類），但這不是我要問的！

我想在不觸及應用該類的元素的情況下修改 CSS 類中的屬性。

換句話說，如果這是 css

.myclass {
  font-size: 14px;
  color: #aab5f0;
}

這是 html

<span id="test" class="myclass"> foo bar </span>

增加span標簽的字體我想修改類的內容而不是做類似的事情

var fontsize = parseInt($('#test').css('font-size').replace(/[^-\d\.]/g, ''));
fontsize += 10;
$('#test').css('font-size', fontsize+'px');

我希望班級變成

.myclass {
      font-size: 18px;
      color: #aab5f0;
    } 

有沒有辦法通過 Javascript 更改實際的類？

我的另一個解決方案是將 css 放入容器中並每次重新填充容器，但我感覺這不是一個好主意......

Answer 1

我認為理想情況下，您應該在html或body元素上定義基本字體大小。 CSS 中的所有其他字體大小都應該與“主”字體大小相關，如下所示：

然后，當你通過 jQuery.css() 調整 body 的 font-size 時，其他元素都會相對於父元素自動調整它們的大小。

$(body).css('font-size', '14px');

您不必使用body級別，您可以將基本字體大小定義為 div 或其他容器，並將其用作父級。

這是一個人為的例子：

 $('#grow').click(function() { $('body').css('font-size', '18px'); });

 body { font-size: 12px; } h3, p { font-size: 1.0em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3>Main Title</h3> <p> Welcome to my website. </p> <button id="grow" type="button">Grow</button>

Answer 2

盡管有我的評論，請看這個問題： 從 JavaScript 設置 CSS 偽類規則

更改類和“設置偽類規則”的實現方式相同。

@Box9 的答案可能是您實際應該使用的答案：

我為此拼湊了一個小型庫，因為我確實認為在 JS 中存在操作樣式表的有效用例。

Answer 3

尋找同樣的東西。

這是我的解決方案

https://jsfiddle.net/sleekinteractive/0qgrz44x/2/

HTML

<p>The Ants in France stay mainly on the Plants</p>

CSS

p{
font-family:helvetica;
font-size:15px;
}

JAVASCRIPT (uses jQuery)

function overwrite_css(selector,properties){ 

// selector: String CSS Selector
// properties: Array of objects

var new_css = selector + '{';

for(i=0;i<properties.length;i++){

new_css += properties[i].prop + ':' + properties[i].value + ';';

}

new_css += '}';

$('body').append('<style>' + new_css + '</style>');

}

overwrite_css('p',Array({prop: 'font-size', value: '22px'}));
overwrite_css('p',Array({prop: 'font-size', value: '11px'}));
overwrite_css('p',Array({prop: 'font-size', value: '66px'}));

// ends on 66px after running all 3. comment out lines to see changes

Answer 4

無需更改類本身。 要覆蓋該行為，只需向現有類添加另一個類或完全更改它。 我將展示第一個選項：

.myclass {
    font-size: 14px;
    color: #aab5f0;
}
.myclass.override {
    font-size: 12px;
}

然后你需要從 javascript 做的就是切換覆蓋類。 這樣它也好得多，因為所有的演示都是在 CSS 中完成的。

Answer 5

由於很明顯您正在使用 jQuery，請參閱addClass和removeClass函數。

$('#test').removeClass('myClass').addClass('yourClass');

Answer 6

簡單的jQuery：

$('#test').attr('class','bigFont'); 

或原生 JS ：

document.getElementById('test').className ='bigFont';

更新

var size = [ 10 , 20 , 30 ] ;
var i =0;
$('#test').css('font-size',size[i]+'px');
i = (i+1)%size.length ;