实现输入属性&&属性值更改标签属性——纯前端实现（纯小白也能看懂&CV直接拿走直接用&&源码分享）
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现输入属性&&属性值更改标签属性——纯前端实现（纯小白也能看懂&CV直接拿走直接用&&源码分享）相关的知识，希望对你有一定的参考价值。
实现效果：
JS练手
| 分栏名称 | 传送门 |
|---|---|
| 🎐爬虫难，跟我一起入爬虫坑，爬虫一条龙服务！🎐 | 《入坑Python爬虫》 |
| 🐲Django框架难，跟我一起一条龙教学（附带多个小型项目实战！）🐲 | 《Django框架一条龙》 |
| 🐋Scrapy框架难，跟我一起一条龙教学（附带多个小型项目实战！）🐋 | 《Scrapy框架一条龙》 |
| 🐠Tornado框架难，跟我一起一条龙教学（附带一个完整项目！）🐠 | 《Tornado框架一条龙》 |
| 🐝爬虫——JS渗透；三大验证码（滑块，点触，图形）；字体反爬；移动端！🐝 | 《爬虫高级一条龙》 |
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid cadetblue;
font-size: 30px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
属 性：<input type="text" placeholder="请输入CSS的属性"><br>
属性值：<input type="text" placeholder="请输入CSS的属性值"><br>
<button>设置</button>
<div id="div1">
不一样的烟火
</div>
<script>
var box = document.getElementById("div1");
var btn = document.getElementsByTagName("button")[0];
var ipt = document.getElementsByTagName("input");
// 鼠标的滑入滑出事件
box.onmouseenter = function (ev) {
box.innerText = "我就是我！"
}
box.onmouseleave = function (ev) {
box.innerText = "不一样的烟火"
}
// 设置按钮的点击事件
btn.onclick = function () {
// 获取属性
var a = ipt[0].value;
var b = ipt[1].value;
// 赋予样式 下面总共有三种方法：：：
// 第一种赋予样式的方法！
// box.style[a] = b;
// 第二种赋予样式的方法！
// box.setAttribute("style",a+":"+b);
// 第三种赋予样式的方法！
// box.style.cssText = a + ":" + b;
}
</script>
</body>
</html>
以上是关于实现输入属性&&属性值更改标签属性——纯前端实现（纯小白也能看懂&CV直接拿走直接用&&源码分享）的主要内容，如果未能解决你的问题，请参考以下文章