当前位置：首页 > news >正文

js手撕 | 使用css画一个三角形使用js修改元素样式驼峰格式与“-”格式相互转化

news 2025/6/23 17:40:24

1.使用css画一个三角形

借助 border 实现，在 width 和 height 都为 0 时，设置 border，便会呈现三角形。想要哪个方向的三角形，设置其他三边为透明即可。
同时，可以通过调整不同边的宽度，来调整三角形的高度和宽度。

<style>.box1 {width: 0;height: 0;content: '';border-right: 100px solid black;border-left: 100px solid transparent;border-top: 100px solid transparent;border-bottom: 100px solid transparent;}
</style><body><div class="box1"></div>
</body>

效果如下：
在这里插入图片描述

2. 如何使用js来实现：鼠标移入时修改元素的样式

法一：使用addEventListener

element = document.getElementById("box");element.addEventListener("mouseenter",()=>{element.style.backgroundColor = "pink";element.style.border = "1px solid black";
})
element.addEventListener("mouseleave",()=>{element.style.backgroundColor = "";element.style.border = "1px red solid";
})
// 单击事件
element.addEventListener("click", () => {alert("元素被单击了！");
});

法二：直接设置 onmouseenter 和 onmouseleave 属性

element = document.getElementById("box");element.onmouseenter = function () {this.style.backgroundColor = "lightblue";this.style.color = "white";
};element.onmouseleave = function () {this.style.backgroundColor = "";this.style.color = "";
};

3. 驼峰格式与“-”格式相互转化

3.1 “-”格式转化为驼峰格式

let str = "hello-world";
function fun(str){let temp = str.split('-');for(let i=1;i<temp.length;i++){let s = [...temp[i]];s[0] = s[0].toUpperCase();temp[i] = s.join("");}return temp.join("");
}
console.log(fun(str))   // helloWorld

3.2 驼峰格式转换为“-”格式

let str = "helloWorld";
function fun(str){let res = [];for(let i of str){if(i===i.toUpperCase()){res.push("-");res.push(i.toLowerCase());}else{res.push(i)}}return res.join("")
}
console.log(fun(str))    // hello-world