Question

我在HTML表单中有一个div标签。

<div class="heading"> </div>

为此，我有CSS：

.myDiv .heading { 
    font-size: 22px;
    color: #ff5450;
}

但是，我想根据某些条件来覆盖此CSS，例如：

 if(condition === true){
    .myDiv .heading { 
        font-size: 14px;
        color: #000000;
    } }

我该如何实现？

Answer 1

您可以像这样使用jquery来更改css属性条件为真

if(condition)
{
  document.getElementByClass("heading").style.display = "block";
}

Answer 2

您是否考虑过使用JavaScript更改商品样式的功能？您将创建一个JS文件，并将其包含在HTML页面的head部分中。

然后在您的JS文件中执行以下操作：

if (true) {
    document.getElementById("heading2").style.color= "#000000";
    document.getElementById("heading2").style.fontSize = "14px";
}

请参阅：W3schools

Answer 3

请参阅：

$('.normal').on('click',function(){
  if($('.normal').hasClass('newClass'))
    $('.normal').removeClass('newClass')
  else
    $('.normal').addClass('newClass');
})

.normal{
background-color:red;
font-size:40px;
color:white;
padding:10px;
cursor:pointer;
}
.newClass{
color:red;
background-color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='normal'>Hello , Click me !</div>

CSS-如何覆盖div的属性？

3 个答案: