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

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

news 2026/4/2 18:45:25

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

相关文章：

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

1.使用css画一个三角形 借助 border 实现&#xff0c;在 width 和 height 都为 0 时&#xff0c;设置 border&#xff0c;便会呈现三角形。想要哪个方向的三角形&#xff0c;设置其他三边为 透明即可。同时&#xff0c;可以通过调整不同边的宽度&#xff0c;来调整三角形的高度…...

编程日记 2025/1/28 14:19:16

每日一道算法题

题目&#xff1a;最长递增子序列的个数 给定一个未排序的整数数组&#xff0c;找到最长递增子序列的个数。 示例 1 输入&#xff1a;nums [1,3,5,4,7]输出&#xff1a;2解释&#xff1a;有两个最长递增子序列&#xff0c;分别是 [1,3,4,7] 和 [1,3,5,7] 。 示例 2 输入&a…...

编程日记 2025/1/28 14:18:12

低代码系统-产品架构案例介绍、明道云（十一）

明道云HAP-超级应用平台(Hyper Application Platform)&#xff0c;其实就是企业级应用平台&#xff0c;跟微搭类似。 通过自设计底层架构&#xff0c;兼容各种平台&#xff0c;使用低代码做到应用搭建、应用运维。 企业级应用平台最大的特点就是隐藏在冰山下的功能很深&#xf…...

编程日记 2025/1/28 14:17:10

论文笔记（六十三）Understanding Diffusion Models: A Unified Perspective（三）

Understanding Diffusion Models: A Unified Perspective&#xff08;三&#xff09; 文章概括 文章概括 引用&#xff1a; article{luo2022understanding,title{Understanding diffusion models: A unified perspective},author{Luo, Calvin},journal{arXiv preprint arXiv:…...

编程日记 2025/1/28 14:15:57

利用机器学习创建基于位置的推荐程序

推荐系统被广泛应用于不同的应用程序中&#xff0c;用于预测用户对产品或服务的偏好或评价。在过去的几分钟或几小时里&#xff0c;你很可能在网上遇到过或与某种类型的推荐系统进行过互动。这些推荐系统有不同的类型&#xff0c;其中最突出的包括基于内容的过滤和协作过滤。在…...

编程日记 2025/1/28 14:07:39

每日一题 429. N 叉树的层序遍历

429. N 叉树的层序遍历 /*class Solution { public:vector<vector<int>> levelOrder(Node* root) {queue<Node*> que;que.push(root);vector<vector<int>> ans;if(root nullptr){return ans;}while(!que.empty()){int sizeQue que.size();vec…...

编程日记 2025/1/28 14:06:23

AIP-132 标准方法：List

编号132原文链接AIP-132: Standard methods: List状态批准创建日期2019-01-21更新日期2022-06-02 在许多API中&#xff0c;通常会向集合URI&#xff08;例如 /v1/publishers/1/books &#xff09;发出GET请求&#xff0c;获取集合中资源的列表。 面向资源设计&#xff08;AIP…...

编程日记 2025/1/28 14:05:11

CSAPP学习：前言

前言 本书简称CS&#xff1a;APP。 背景知识 一些基础的C语言知识 如何阅读 Do-做系统 在真正的系统上解决具体的问题&#xff0c;或是编写和运行程序。 章节 2025-1-27 个人认为如下章节将会对学习408中的操作系统与计算机组成原理提供帮助&#xff0c;于是先凭借记忆将其简单…...

编程日记 2025/1/28 14:02:58

【统计的思想】假设检验（二）

假设检验是根据人为设定的显著水平&#xff0c;对被测对象的总体质量特性进行统计推断的方法。 如果我们通过假设检验否定了零假设&#xff0c;只是说明在设定的显著水平下&#xff0c;零假设成立的概率比较小&#xff0c;并不是说零假设就肯定不成立。如果零假设事实上是成立…...

编程日记 2025/1/28 13:59:48

KNN算法学习实践

1.理论学习 原文链接 ShowMeAI知识社区 2.案例实践 假如一套房子打算出租&#xff0c;但不知道市场价格&#xff0c;可以根据房子的规格&#xff08;面积、房间数量、厕所数量、容纳人数等&#xff09;&#xff0c;在已有数据集中查找相似&#xff08;K近邻&#xff09;规格…...

编程日记 2025/1/28 13:58:47

数据可视化的图表

1.折线图反映了一段时间内事物连续的动态变化规律,适用于描述一个变量随另一个变量变化的趋势,通常用于绘制连续数据,适合数据点较多的情况。 2.散点图是以直角坐标系中各点的密集程度和变化趋势来表示两种现象间的相关关系&#xff0c;常用于显示和比较数值。当要在不考虑时间…...

编程日记 2025/1/28 13:57:45

动手学深度学习-卷积神经网络-3填充和步幅

目录 填充 步幅 小结 在上一节的例子&#xff08;下图&#xff09; 中&#xff0c;输入的高度和宽度都为3&#xff0c;卷积核的高度和宽度都为2&#xff0c;生成的输出表征的维数为22。 正如我们在 上一节中所概括的那样&#xff0c;假设输入形状为nhnw&#xff0c;卷积核形…...

编程日记 2025/1/28 13:55:39

【JS|第28期】new Event()：前端事件处理的利器

日期&#xff1a;2025年1月24日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…...

编程日记 2025/1/28 13:48:30

Spring Boot 中的事件发布与监听：深入理解 ApplicationEventPublisher（附Demo）

目录 前言1. 基本知识2. Demo3. 实战代码 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 基本的Java知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&am…...

编程日记 2025/1/28 13:45:26

【Spring】Spring启示录

目录 前言 一、示例程序 二、OCP开闭原则 三、依赖倒置原则DIP 四、控制反转IOC 总结 前言 在软件开发的世界里&#xff0c;随着项目的增长和需求的变化&#xff0c;如何保持代码的灵活性、可维护性和扩展性成为了每个开发者必须面对的问题。传统的面向过程或基于类的设计…...

编程日记 2025/1/28 13:43:23

ospf动态路由配置，cost路径调整，ospf认证实验

一、实验拓扑如图&#xff1a; 接口ip配置网络 &#xff1a;10.17.12.* 10.17.13.* &#xff0c;10.17.23.* 回环接口配置分别为 10.0.1.1 &#xff0c;10.0.1.2&#xff0c;10.0.1.3对应三台路由器 ar1配置接口ip interface GigabitEthernet0/0/0 ip address 10.17.12.1…...

编程日记 2025/1/28 13:40:20

在Rust应用中访问.ini格式的配置文件

在Rust应用中访问.ini格式的配置文件&#xff0c;你可以使用第三方库&#xff0c;比如 ini 或 config. 下面是一个使用 ini 库的示例&#xff0c;该库允许你读取和解析.ini文件。 使用 ini 库 添加依赖 首先&#xff0c;你需要在你的 Cargo.toml 文件中添加 ini 库的依赖&am…...

编程日记 2025/1/28 13:39:07

批量处理多个模型的预测任务

#!/bin/bash# 检查是否传入必要的参数&#xff0c;若未传入参数则打印用法并退出 if [ "$#" -lt 1 ]; thenecho "用法: $0 <file_path>"echo "示例: $0 /home/aistudio/work/PaddleSeg/city/cityscapes_urls_extracted.txt"exit 1 fi# 读取…...

编程日记 2025/1/28 13:36:01

Java 编程初体验

Java学习资料 Java学习资料 Java学习资料 一、引言 在当今数字化的时代&#xff0c;编程已然成为一项极具价值的技能。而 Java 作为一门广泛应用于企业级开发、移动应用、大数据等众多领域的编程语言&#xff0c;吸引着无数初学者投身其中。当我们初次踏入 Java 编程的世界&…...

编程日记 2025/1/28 13:31:52

element-plus 的table section如何实现单选

如果是单选那么全新的按钮应该隐藏或者不可编辑的状态。但是我没找到改变成不可编辑的方法&#xff0c;只能采取隐藏 <template><!-- 注意要包一层div根元素&#xff0c;否则css样式可能会不生效&#xff0c;原因不详 --><div><el-table ref"proTab…...

编程日记 2025/1/28 13:28:44

C#实战：基于TouchSocket构建高性能WebSocket双向通信系统

1. WebSocket与TouchSocket核心概念 第一次接触WebSocket时&#xff0c;我被它的双向通信能力惊艳到了。想象一下快递员和收件人的关系&#xff1a;传统HTTP就像每次送货都要重新敲门确认身份&#xff08;建立连接&#xff09;&#xff0c;而WebSocket则像快递员直接把包裹交给…...

编程新知 2026/4/2 18:18:25

Omni-Vision Sanctuary 在 Proteus 仿真中的应用：智能电路设计与调试助手

Omni-Vision Sanctuary 在 Proteus 仿真中的应用&#xff1a;智能电路设计与调试助手 1. 电子工程师的新助手 作为一名电子工程师&#xff0c;你是否经历过这样的场景&#xff1a;面对一个功能需求&#xff0c;花了大量时间查阅资料却找不到合适的电路方案&#xff1b;仿真波…...

编程新知 2026/4/2 17:27:21

Jable视频下载工具：高效解决方案与专业使用指南

Jable视频下载工具&#xff1a;高效解决方案与专业使用指南 【免费下载链接】jable-download 方便下载jable的小工具 项目地址: https://gitcode.com/gh_mirrors/ja/jable-download 问题诊断&#xff1a;视频下载的四大核心挑战 技术门槛障碍 传统视频下载工具往往需要…...

编程新知 2026/4/2 17:11:05

突破可视化边界：Charticulator重新定义数据叙事的技术实践

突破可视化边界&#xff1a;Charticulator重新定义数据叙事的技术实践 【免费下载链接】charticulator Interactive Layout-Aware Construction of Bespoke Charts 项目地址: https://gitcode.com/gh_mirrors/ch/charticulator 在数据可视化领域&#xff0c;传统工具往往…...

编程新知 2026/4/2 16:56:42

MediaCrawler：社交媒体数据采集的全方位解决方案

MediaCrawler&#xff1a;社交媒体数据采集的全方位解决方案 【免费下载链接】MediaCrawler-new 项目地址: https://gitcode.com/GitHub_Trending/me/MediaCrawler-new 在信息爆炸的数字时代&#xff0c;社交媒体平台成为数据的富矿。无论是市场分析、学术研究还是内容…...

编程新知 2026/4/2 15:31:13

宝塔面板备份翻车实录：我是如何用rclone+阿里云OSS实现自动化异地容灾的

宝塔面板数据安全实战&#xff1a;从备份翻车到自动化异地容灾 凌晨三点&#xff0c;服务器硬盘的物理损坏警报声把我从睡梦中惊醒。登录宝塔面板后&#xff0c;眼前一片空白——过去半年的网站数据与客户资料全数消失。更讽刺的是&#xff0c;前一天刚执行过本地备份&#xff…...

编程新知 2026/4/2 15:08:42

TDEngine-OSS-3.3.7.5开源版高可用部署实战（单节点快速入门与三副本集群搭建详解）

1. TDEngine开源版入门&#xff1a;为什么选择它&#xff1f; 如果你正在寻找一个高性能、开源的时序数据库&#xff0c;TDEngine绝对值得考虑。这个由涛思数据推出的产品&#xff0c;专门为物联网、工业互联网等场景设计&#xff0c;能够轻松处理海量时间序列数据。我最近在实…...

编程新知 2026/4/2 15:06:37

告别手动配置：用快马AI生成openclaw自动化安装与环境管理脚本

作为一名经常需要配置各种开发环境的程序员&#xff0c;我深刻体会到手动安装工具的繁琐。最近在搭建一个爬虫项目时需要用到openclaw&#xff0c;发现传统安装方式存在几个明显的效率痛点&#xff1a; 版本查找耗时&#xff1a;需要反复在官网和文档间切换&#xff0c;确认最…...

编程新知 2026/4/2 14:32:07

实战演练企业级mysql环境搭建，快马平台生成电商项目配置全流程

今天想和大家分享一个企业级MySQL环境搭建的实战经验。最近在帮朋友搭建一个电商网站的后台数据库&#xff0c;正好用到了InsCode(快马)平台来快速生成配置方案&#xff0c;整个过程非常顺畅。 1. 准备工作与环境选择 首先需要明确的是&#xff0c;企业级MySQL部署和本地开发…...

编程新知 2026/4/2 14:01:27

实战应用：基于快马构建抖音版本更新深度分析系统，赋能产品决策

今天想和大家分享一个实战项目&#xff1a;如何用InsCode(快马)平台快速搭建抖音版本更新分析系统。作为产品经理&#xff0c;每次版本更新后都需要快速掌握用户反馈和市场反应&#xff0c;这个工具帮我节省了大量手工整理数据的时间。 数据采集模块搭建 首先需要获取两个核心数…...

编程新知 2026/4/2 12:25:54