重学前端第⼀阶段完钢琴项⽬（document.querySelectorjs改变css样式。。。
菜鸟学完之后，总是感觉学了也还是不会，主要就是因为没有实践，不知道⾃⼰到底哪⾥有问题！虽然说我还没复习完，前端很⼤⼀部分都处于模糊阶段，但是感觉还是应该先尽⼒做⼀个简单的东西，把这⼏天学的都⽤进去，遇到困难，才知道⾃⼰的不⾜！⽽菜鸟感觉⾃⼰的天赋可能就在于，学习完之后，可以马上想⼀个运⽤到学习完了的知识点的项⽬φ(゜▽゜*)♪
⽂章⽬录
概要
菜鸟⼤致要做的就是这样的：
可以拖动左侧的⼩乐谱（下拉图）到中间变成⼤乐谱，然后右边有演⽰视频，按键通过按键盘上的字母发出对应的⾳阶！html document是什么
第⼀部分（左侧下拉）
⼀开始，菜鸟的代码是这样的
HTML：
<ul class="head_left_ul">
<li>
<div class="head_music_name">
<img onclick="show1()"src="img/尖括号右.png">
<p>两只⽼虎</p>
</div>
<div class="head_music"id="twotiger_music">
<img src="img/twotiger.jpg"> </div>
</li>
<li>
<div class="head_music_name">
<img onclick="show2()"src="img/尖括号右.png">
<p>⼩星星</p>
</div>
<div class="head_music"id="star_music">
<img src="img/star.jpg">
</div>
</li>
<li>
<div class="head_music_name">
<img onclick="show3()"src="img/尖括号右.png">
<p>⾍⼉飞</p>
</div>
<div class="head_music"id="worm_music">
<img src="img/worm.jpg">
</div>
</li>
</ul>
css：
.head_left_ul li{
background-color:rgba(128, 128, 128,0.7);
color: white;
width: 140px;
}
.head_music_name P{
display: inline-block;
margin: 0 0 0 30px;
vertical-align: bottom;
}
.head_music{
display: none;
}
js：
function show1(){
let a = document.querySelector("#twotiger_music");
console.log(a);
console.log(a.style.display);
if(a.style.display ==="none"|| a.style.display ===""){
a.style.display ="inline-block";
}else{
a.style.display ="none";
}
}
function show2(){
let a = document.querySelector("#star_music");
if(a.style.display ==="none"|| a.style.display ===""){
a.style.display ="inline-block";
}else{
a.style.display ="none";
}
}
function show3(){
let a = document.querySelector("#worm_music");
if(a.style.display ==="none"|| a.style.display ===""){
a.style.display ="inline-block";
}else{
a.style.display ="none";
}
}
代码解析
vertical-align
这⾥之前的讲过，但是有点不⼀样，先讲的是⽂字在前⾯，图⽚在后⾯，现在这种情况正好反过来，不过在浏览器中进⾏调试，可以很清楚的知道该⽤什么，记下来不如会调试。如果想看的话 ，见
document.querySelector
querySelector() ⽅法返回⽂档中匹配指定 CSS 选择器的⼀个元素。
注意：
querySelector() ⽅法仅仅返回匹配指定选择器的第⼀个元素，如果你需要返回所有的元素，请使⽤ querySelectorAll() ⽅法替代。
资料：
js改变css样式的5种⽅式
第⼀种：使⽤ cssText 全属性
*.style.cssText ="width: 666px; color: red";
第⼆种：使⽤ setProperty(属性名，属性值) ⽅法
*.style.setProperty("width","666px");
第三种：直接使⽤单属性
*.style.width="666px";
第四种：直接修改名字
function changeStyle3(){
var obj = ElementById("btnB");
obj.className ="style2";
//或者
obj.setAttribute("class","style2");
}
setAttribute() ⽅法添加指定的属性，并为其赋指定的值。
如果这个指定的属性已存在，则仅 设置/更改 值。
第五种：修改外联样式
<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
function changeStyle4(){
var obj = ElementById("css");
obj.setAttribute("href","css2.css");
}
菜鸟思路
⼀·、这⾥菜鸟打印a.style.display，就是想看第⼀次点击的时候，浏览器会默认display：none为什么东西，结果就是空⽩，也就是“”
⼆、菜鸟之所以会⽤三个show函数，是因为，如果使⽤querySelector() ⽅法仅仅返回匹配指定选择器的第⼀个元素，那样菜鸟不知道怎么区分三个li
第⼀次修改
然后，菜鸟感觉不⾏，应该把箭头也变⼀下，不能⼀直都是向右的箭头，点击之后应该向下！
于是代码变成了这样（css写好了就⽆变化了，后⾯不再列举）。
HTML：
<ul class="head_left_ul">
<li>
<div class="head_music_name">
<img id="head_arrows"onclick="show1(this)"src="img/尖括号右.png"> <p>两只⽼虎</p>
</div>
<div class="head_music"id="twotiger_music">
<img src="img/twotiger.jpg">
</div>
</li>
<li>
<div class="head_music_name">
<img id="head_arrows"onclick="show2(this)"src="img/尖括号右.png"> <p>⼩星星</p>
</div>
<div class="head_music"id="star_music">
<img src="img/star.jpg">
</div>
</li>
<li>
<div class="head_music_name">
<img id="head_arrows"onclick="show3(this)"src="img/尖括号右.png"> <p>⾍⼉飞</p>
</div>
<div class="head_music"id="worm_music">
<img src="img/worm.jpg">
</div>
</li>
</ul>
js：

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