想用JavaScript实现DIV样式切换

JavaScript021

想用JavaScript实现DIV样式切换,第1张

假设有div元素<div id="mydiv" class="css1">,和两个样式: .css1{} .css2{}

(1)移除和添加样式分别是$("mydiv").removeClass("css1") 和$("mydiv").addClass("css1")

(2)如果是换了样式之后,想换回原来的样式,即是切换样式,那么就涉及到一个判断当前样式的问题,此时可以使用方法hasClass(),该方法是判断元素当前是否含有某样式。

(3)所以根据1、2可以实现一个点击切换样式的效果,示例代码如下:

<script type="text/javascript">

$("#mydiv").click(function () {

if ($(this).hasClass("css1")) {

$(this).removeClass("css1")

$(this).addClass("css2")

} else if ($(this).hasClass("css")) {

$(this).removeClass("css2")

$(this).addClass("css1")

}

})

</script>

(手写不易,望采纳!)

这个问题涉及到了两个知识点,一个知识点是利用js操作dom的css属性;另一个知识点是js进行定时操作。

有两种实现方式,一种是用原生js,另一种是用jquery。为了简单,以jquery为例:

<html>

<head>

<script src="./jquery.js"></script>

</head>

<body>

<div id="d1" style="display:none">d1</div>

<div id="d2">d2</div>

<script>

$(function(){

//转换div

function changeDiv(){

if($("#d1").style.display==none){

$("#d1").show()

$("#d2").hide()

}else{

$("#d1").hide()

$("#d2").show()

}

}

//利用setInterval,设置每隔10秒执行changeDiv函数。

window.setInterval("changeDiv()",10000)

})

</script>

</body>

</html>

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var p_1=document.getElementById('p1')

var p_2=document.getElementById('p2')

var d_c=document.createElement("div")

d_c = p_1

d_c.id = 'p3'

var d_d=document.createElement("div")

d_d = p_2

d_d.id='p4'

//alert(d_d.innerHTML)

$(".btn1").click(function(){

//$("#p2").replaceWith($("#p4").html())

//$("#p1").replaceWith($("#p3").html())

$("#p2").replaceWith("<div>4444</div>")

$("#p1").replaceWith("<div>3333</div>")

//$("#p1").replaceWith($t("#p4").html())

// alert($("#p3").text())

//alert($("#p4").text())

})

})

</script>

<style>

div{height:20pxbackground-color:yellow}

</style>

</head>

<body>

<div id='p1'>This is a paragraph.11111</div>

<div id='p2'>This is another paragraph.222222</div>

<div id='div1'>333333333</div>

<button class="btn1">用粗体文本替换所有段落</button>

</body>

</html>