为什么将css样式放在css文件和直接在标签中使用style属性所表现的不同？
问题描述：
第一种直接在div标签上标明style
<div class="changeX">a元素</div>
<div class="changeY" style="display: none;">b元素</div>
<input type="button" value="切换显示a元素" onclick="gr('.changeX','.changeY');" />
<button onclick="gr('.changeY','.changeX');">切换显示b元素</button>
<script type="text/javascript">
function gr(s1, s2) {
document.querySelector(s1).style.display = "";
document.querySelector(s2).style.display = "none";
}
</script>
可以实现点击按钮使各内容表示
第二种将代码分离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试代码</title>
<style type="text/css">
.changeY{
display: none;
}
</style>
</head>
<body>
<div class="changeX">a元素</div>
<div class="changeY">b元素</div>
<input type="button" value="切换显示a元素" onclick="gr('.changeX','.changeY');" />
<button onclick="gr('.changeY','.changeX');">切换显示b元素</button>
<script type="text/javascript">
function gr(s1, s2) {
document.querySelector(s1).style.display = "";
document.querySelector(s2).style.display = "none";
}
</script>
</body>
</html>
只能实现点击第二个按钮将盒子内容隐藏而不能显示盒子内容
答
function gr(s1, s2) {
document.querySelector(s1).style.display = "block";
document.querySelector(s2).style.display = "none";
}
答
你 ".changeY"类已经有display:none了, 用函数这是只是让div标签里面的style没有, 然后就应用类.changeY, display: none
要将代码分离, 切换显示不显示, 直接切换类ok? 一个类show, 一个类hide就完事了....
代码分离了就不要直接该element标签里的style了
答
document.querySelector(s2).style.display，这个里边的style是元素的属性，属性上的样式是优先于类，但熟悉标签没有的情况下，类标签就生效了。