我们如何使用javascript来应用if else条件对css属性

时间：2017-08-12 05:30:41

标签： javascript html css

我想在JavaScript中为CSS属性添加条件。最简单的方法是什么？

<html>
<head>
   <title>TOOLTIP USING JAVASCRIPT</title> 
    <style>
        span{
            cursor: pointer;
        }

        #demo{
            background-color:cadetblue;
            color:white;
            width:150px;
            padding:10px;
            font-size:12px;
            position:absolute;
            top:20px;
            left:60px;
            display:none;
        }
    </style>
    <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    </head>

<body>
    <br><br><br><br>

    <label for='name'>NAME </label>
    <span id="s1" style="color:#00b1ff;font-size:15px" class="fa fa-info-circle">&nbsp;:</span>

    <p id="demo">Please Enter Only Characters</p>
    <input type="text" name="name" placeholder="Enter The Name ">

<script type="text/javascript">

if(con.style.display="none")  
{
code here....
}

</script>
    </body>
</html>

1 个答案:

答案 0 :(得分：1)

使用javascript getComputedStyle＆amp; getPropertyValue财产。

HTML

<div id="conditionals">Change this text here</div>

CSS

#conditionals {
display: none;
}

的Javascript

var element = document.getElementById("conditionals");
var compStyle = window.getComputedStyle(element);
var prop = compStyle.getPropertyValue('display');

alert(prop);

现在你将把prop值变为none并使用if / else条件来显示操作css和html

if(prop) {
/**code here **/
}
else {
/** code here **/
}