web前端小知识 —— 【HTML，CSS，JS】集锦 【第一期】 { }

1、获取元素样式属性的方法

第 一 种 : 较灵活，能获取传进来想获取的元素的样式属性，返回的是【字符串】

function getStyle(obj, name) {
    // IE                                      // 主流
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, false)[name];
}

第 二 种 : 重复使用率低

function getObjWidth(){
    return parseInt(window.getComputedStyle(document.querySelector(".box")).width,10);
}

---

2、鼠标【hover】（漂浮）在一个元素上，控制其他元素

实现一个【会动的】close 按钮，效果如下：

<div id="div1">
	<span id="close1"></span>
	<span id="close2"></span>
</div>
<div id="div2">
	<span id="div21"></span>
	<span id="div22"></span>
</div>

#div1 {
    width: 30px;
    height: 30px;
    left: 100px;
    top: 200px;
    position: absolute;
    background-color: aquamarine;
}
#div2 {
    width: 30px;
    height: 30px;
    left: 100px;
    top: 250px;
    position: absolute;
    background-color: aquamarine;
}

#div1:hover > #close1 {
    transform: rotateZ(135deg);
}
/* '>' 控制下一级 */
#div1:hover > #close2  {
    transform: rotateZ(45deg);
}
/* '+' 控制同级 */
#div1:hover + #div2 {
    background-color: #337ab7;
}
/* 控制同级的下一级 */
#div1:hover + #div2 > #div21 {
    background-color: bisque;
}
#div1:hover + #div2 > #div22 {
    background-color: brown;
}

#close1,
#close2,
#div21,
#div22 {
    position: absolute;
    top: 3px;
    right: 12.5px;
    width: 5px;
    height: 25px;
    border-radius: 25px;
    background-color: #333744;
    transition: all 0.2s ease;
}

#close1,
#div21 {
    transform: translateY(-5px) rotateZ(90deg);
}

#close2,
#div22 {
    transform: translateY(5px) rotateZ(90deg);
}

---

3、[].forEach.call() 函数的用法

通过document.querySelectorAll()获取到的是【NodeList】对象，不能通过【forEach】遍历

参数1、List 对象

参数2、回调函数

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>

[].forEach.call(divs,(item,index) => {
	console.log(`${index} - ${item.innerHTML}`);
})

---

4、实现一个【画圆】的动画

效果：

<svg viewBox="0 0 100 100">
      <circle
        fill="none"
        stroke="#333744"
        stroke-width="5"
        cx="50"
        cy="50"
        r="15"
        stroke-linecap="round"
        class="ball"
        transform="rotate(90 50 50)"
      ></circle>
</svg>

.ball {
    stroke-dasharray: 95; /* 设置为约等于ball的【圆周】长度 */
    stroke-dashoffset: 95;
    transition: all 0.5s ease-in-out;
}

svg:hover .ball {
    stroke-dashoffset: 0;
}

---

5、自定义【右键菜单】

<h1>按下右键呼出菜单</h1>
    <div class="menu">
    <div class="child">Unity</div>
    <div class="child">LeetCode</div>
    <div class="child">Reload</div>
</div>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1{
    transition: all 0.5s ease-in-out;
}

.menu{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    height: 300px;
    background-color: #333744;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    transform: scale(0);
}

.menu:nth-child(1) {
    margin-top: 5px;
}

.open{
    transform: scale(1);
}

.child{
    width: 95%;
    height: 25px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    padding-bottom: 5px;
    color: floralwhite;
    font-size: 15px;
}

.child:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

window.onload = function(){
    var menu = document.querySelector(".menu");
    var h1 = document.querySelector("h1");
    document.oncontextmenu = function(e){
        h1.style.opacity = '0';
        menu.style.opacity = '1';
        menu.classList.add("open");
        menu.style.left = e.clientX + "px";
        menu.style.top = e.clientY + "px";
        return false;
    }
    document.onmousedown = function(){
        menu.style.opacity = '0';
    }
    var linkS = menu.children;
    linkS[0].onclick = function(){
        window.open("http://www.unity.cn");
    }
    linkS[1].onclick = function(){
        window.open("http://www.leetcode.com");
    }
    linkS[2].onclick = function(){
        window.location.reload();
    }
}