我想動態更改 css 類的屬性之一的值
這是我的場景：
我有很多元素使用一個類，而不是獲取所有元素并回圈它們并應用樣式，我想更改類的屬性之一的值，該值已經應用于它們。例如
.prodName {
max-width: 270px;
display: block;
}
上面的類被許多元素使用，我想改變該類的屬性之一，如
.prodName {
max-width: 350px <---
display: block;
}
在javascript中是否有任何簡單的方法。
在我發布這個問題之前，我已經搜索過但沒有找到任何簡單有用的東西。在此先感謝您的幫助。
uj5u.com熱心網友回復：
在這種情況下，您可以使用 CSS 變數。
const root = document.querySelector(':root');
function play() {
root.style.setProperty('--size', '300px');
}:root {
--size: 100px;
}
.container {
background-color: red;
width: var(--size);
height: var(--size);
cursor: pointer;
}<div class="container" onclick="play()"></div>上述方法的唯一問題是舊瀏覽器的支持。如果您必須支持 IE 和不存在 CSS 變數支持的舊瀏覽器，您可以通過向主體/父容器添加一個類來解決此問題。
function play() {
document.body.classList.add('large')
}.container {
background-color: red;
width: 100px;
height: 100px;
cursor: pointer;
}
.large .container {
width: 300px;
height: 300px;
}<div class="container" onclick="play()"></div>uj5u.com熱心網友回復：
向 CSS 添加新類：
.mw350 {
max-width: 350px;
}
然后在 JS 中給元素添加新的類：
document.querySelector('.prodName').className = ' mw350'; // <-- better to select using unique IDs, like '#prodNameElement'
uj5u.com熱心網友回復：
如果您要控制來自 ts 的 css 類/屬性更改，可能需要更改函式或 var，您可能需要使用 ngClass：https ://www.freecodecamp.org/news/angular-ngclass-example/并擁有您想要的所有邏輯，易于訪問。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/401769.html
標籤：javascript html css 有角的
上一篇：Reactjs回應式渲染串列