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

来源：互联网发布：php array shift 编辑：程序博客网时间：2024/06/05 18:04

<!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"    }    }

阅读全文

0 0