15、js修改html的css样式
学习⽬标：
1、使⽤JS操作html的css样式
2、通过轮询框⽰例加深JS的了解
学习过程：
之前我们学习了使⽤js修改html的属性达到⼀种交互的效果，事实上，使⽤js修改html的css样式可以实现⼀种更加绚丽的交互效果。这节课我们就学习⼀下如何使⽤js修改html的样式的⽅法。
要修改html的样式有两种⽅式，⼀种是修改style属性
html标签对象.style.style属性="属性值"。
另外⼀种就是可以定义⼀个新的样式类，然后修改html的类属性。
html标签对象.className="css类"。如：
css的定义：
<style type="text/css">
#divt {
width: 100px;
height: 100px;
background-color: black;
}
.bb{
border: 1px solid black;
background-color: red;
}
</style>
html的定义：
<input type="button" value="放⼤" onclick="big()" />
<input type="button" value="改变" onclick="rever()" />
<div id="divt" ></div>
<hr/>
使⽤第⼀种⽅式：
var x = 100;
function big() {
var divt = ElementById("divt");
//修改样式
x += 10;
divt.style.width = x;
divt.style.height = x;
divt.style.background = "#ffddcc";
}
function rever() {html span 居中
divt.className="bb";
}
</script>
1、轮询框⽰例
下⾯我们再做两个例⼦：，虽然这个样式不好看，不过也可以看出我们平时经常见到的轮询框其实就是通过修改style样式的display属性。display:none;//隐藏
display:block;//显⽰。
实现代码，html排版如下：
<span id="show1span" onmouseover="showdiv('show1')">标题⼀</span> | <span id="show2span" onmouseover="showdiv('sho
<div class="cc" id="show1div">
内容⼀
</div>
<div class="cc" id="show2div">
内容⼆
</div>
<div class="cc"  id="show3div">
内容三
</div>
对应的css样式如下：
.cc{
width: 100px;
height: 100px;
border: 1px solid black;
}
js控制如下
function showdiv(cdivid){
var showspanid=cdivid+"span";
var showdivid=cdivid+"div";
var ElementById(showspanid);//当前要显⽰      var ElementById(showdivid);//当前要显⽰
//全部隐藏
//显⽰当前
showdiv.style.display="block";
lor="red";
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。