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

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

article 2025/1/30 13:54:13

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