重学前端第一阶段完钢琴项目(document.querySelector js改变css样式的3种方式思路成品)

本文链接：https://blog.youkuaiyun.com/langwang_100/article/details/107690516

菜鸟学完之后，总是感觉学了也还是不会，主要就是因为没有实践，不知道自己到底哪里有问题！虽然说我还没复习完，前端很大一部分都处于模糊阶段，但是感觉还是应该先尽力做一个简单的东西，把这几天学的都用进去，遇到困难，才知道自己的不足！而菜鸟感觉自己的天赋可能就在于，学习完之后，可以马上想一个运用到学习完了的知识点的项目φ(゜▽゜*)♪

文章目录

概要
第一部分（左侧下拉）
总代码

概要

菜鸟大致要做的就是这样的：
在这里插入图片描述
可以拖动左侧的小乐谱（下拉图）到中间变成大乐谱，然后右边有演示视频，按键通过按键盘上的字母发出对应的音阶！

第一部分（左侧下拉）

一开始，菜鸟的代码是这样的
HTML：

<ul style="list-style: none;" 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 style="width: 140px;height: 100px;" 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 style="width: 140px;height: 100px;" 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 style="width: 140px;height: 100px;" 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

这里之前的讲过，但是有点不一样，先讲的是文字在前面，图片在后面，现在这种情况正好反过来，不过在浏览器中进行调试，可以很清楚的知道该用什么，记下来不如会调试。如果想看的话，见重学前端 p多大 / 浏览器最小文字 / 详解img / object-fit和object-posit / 详解map / 空白区域 / 文字与图片对齐 / vertical-align（第一天）

document.querySelector

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意：

querySelector() 方法仅仅返回匹配指定选择器的第一个元素，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

在这里插入图片描述
资料：
HTML DOM querySelector() 方法

js改变css样式的5种方式

第一种：使用 cssText 全属性

*.style.cssText = "width: 666px; color: red";

第二种：使用 setProperty(属性名，属性值) 方法

*.style.setProperty("width", "666px");

第三种：直接使用单属性

*.style.width="666px";

第四种：直接修改名字

function changeStyle3() {
   
   var obj = document.getElementById( "btnB" );
   
   obj.className = "style2";
   //或者
   obj.setAttribute( "class" , "style2" );
}

setAttribute() 方法添加指定的属性，并为其赋指定的值。

如果这个指定的属性已存在，则仅设置/更改值。

第五种：修改外联样式

<link href= "css1.css" rel= "stylesheet" type= "text/css" id= "css" />
 
function changeStyle4() {
   
  var obj = document.getElementById( "css" );
  obj.setAttribute( "href" , "css2.css" );
}

菜鸟思路

一·、这里菜鸟打印a.style.display，就是想看第一次点击的时候，浏览器会默认display：none为什么东西，结果就是空白，也就是“”

二、菜鸟之所以会用三个show函数，是因为，如果使用querySelector() 方法仅仅返回匹配指定选择器的第一个元素，那样菜鸟不知道怎么区分三个li

第一次修改

然后，菜鸟感觉不行，应该把箭头也变一下，不能一直都是向右的箭头，点击之后应该向下！

于是代码变成了这样（css写好了就无变化了，后面不再列举）。
HTML：

<ul style="list-style: none;" 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 style="width: 140px;height: 100px;" 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 style="width: 140px;height: 100px;" 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 style="width: 140px;height: 100px;" src="img/worm.jpg">
	    </div>
	</li>
</ul>

js：

function show1(element) {
   
    let a = document.querySelector("#twotiger_music");
    console.log(element);
    console.log(a);
    console.log(a.style.display);
    if (a.style.display === "none" || a.style.display === "") {
   
        a.style.display = "inline-block";
        element.src = "img/尖括号下.png";
    } else {
   
        a.style.display = "none";
        element.src = "img/尖括号右.png";
    }
}

function show2(element) {