(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>