jQuery与原生js改变CSS样式-颜色

最新推荐文章于 2023-10-05 19:57:11 发布

铁锈_

最新推荐文章于 2023-10-05 19:57:11 发布

阅读量2.6k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/u010107248/article/details/77202454

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
    <head>
        <title> Test </title>
        <script src = "jquery.js"> </script> 
        <script src = "test.js"> </script>
    </head>
    <body>
        <div id = "first">
            A blue sky
        </div>
        <div id = "second">
            A new car
        </div>
        <button class = "button1"  type = "button">改变第一段颜色</button>
        <button class = "button2" type = "button">改变第二段颜色</button>
    </body>
</html>

test.js

jQuery(document).ready( function(){
    
    jQuery("#first").css("color","black")
    var pre_first_color =  jQuery("#first").css("color")
    
    jQuery(".button1").click(function(){ 
        if(  jQuery("#first").css("color") != pre_first_color )
            jQuery("#first").css( "color",pre_first_color)
        else 
            jQuery("#first").css( "color","red")
    })
    
    
    jQuery(".button2").click(function(){
        jQuery("#second").css("color","red")      
    })
})

原生js版本 test.js

window.onload = function(){
    var button_1 = document.querySelector(".button1")
    var button_2 = document.querySelector(".button2")
    
    var first = document.querySelector("#first")
    var second = document.querySelector("#second")
    
    first.style.color = "black"
    console.log( first.style.color )
    
    button_1.onclick = function( ){
        var first_color = first.style.color
        if( first_color == "black"  )
            first.style.color = "red"
        else
            first.style.color = "black"
    }
    
     button_2.onclick = function( ){
        second.style.color = "red"
    }
    
}