您的位置：首页 > Web前端 > JQuery

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

2017-08-15 22:36 411 查看

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

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航