纯前端实现—输入属性&&属性值更改标签对应属性
【摘要】 实现效果：B站视频：https://player.bilibili.com/player.html?aid=974664465 源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: ...
实现效果：
B站视频：https://player.bilibili.com/player.html?aid=974664465
源码：
<!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>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）