一、JS修改属性值
JS可以通过直接修改属性的值，在页面中动态地改变属性的特性，下面是一个修改文本框属性value的示例：
<!DOCTYPE html>
<html>
<head>
<title>JS修改属性值示例</title>
</head>
<body>
<input id="myInput" type="text" value="初始值">
<button onclick="changeValue()">修改value属性值</button>
<script>
function changeValue() {
var input = document.getElementById("myInput");
input.value = "修改后的值";
}
</script>
</body>
</html>
在这个示例中，通过javascript代码获取input元素并修改其value属性的值，当用户点击按钮时，文本框中文字会被修改为“修改后的值”。
二、JS修改样式属性
除了修改属性值，JS还可以修改元素的样式属性，这样可以动态地改变元素的外观，下面是一个修改样式属性color的示例：
<!DOCTYPE html>
<html>
<head>
<title>JS修改样式属性示例</title>
<style>
#myDiv {
color: red;
}
</style>
</head>
<body>
<div id="myDiv">初始文本内容</div>
<button onclick="changeStyle()">修改样式</button>
<script>
function changeStyle() {
var div = document.getElementById("myDiv");
div.style.color = "blue";
}
</script>
</body>
</html>
在这个示例中，初始化时文本的颜色是红色的，点击按钮时，通过JS代码获取div元素并修改其color样式属性的值为“blue”，从而实现动态修改文本颜色的效果。
三、JS修改属性名
在一些复杂的情况下，JS需要修改元素的属性名，下面是一个修改元素id属性名的示例：
<!DOCTYPE html>
<html>
<head>
<title>JS修改属性名示例</title>
</head>
<body>
<div id="myDiv">初始文本内容</div>
<button onclick="changeId()">修改id属性名</button>
<script>
function changeId() {
var div = document.getElementById("myDiv");
div.id = "newDiv";
}
</script>
</body>
</html>
在这个示例中，用户点击按钮后，通过JS的代码获取div元素并修改其id属性名的值为“newDiv”，从而实现动态修改HTML元素id属性名的效果。
四、使用JS修改超链接的href属性值
在网页中，超链接是常用的元素类型，JS可以通过修改超链接的href属性值实现动态修改链接的地址，下面是一个修改链接地址的示例：
<!DOCTYPE html>
<html>
<head>
<title>JS修改链接地址示例</title>
</head>
<body>
<a id="myLink" href="https://www.baidu.com">点击访问百度</a>
<button onclick="changeHref()">修改链接地址</button>
<script>
function changeHref() {
var link = document.getElementById("myLink");
link.href = "https://www.google.com";
}
</script>
</body>
</html>
在这个示例中，通过JS的代码获取链接元素并修改其href属性的值为“https://www.google.com”，从而实现动态修改链接地址的效果。
五、JS修改属性名称
除了修改属性的值和属性名，JS还可以修改HTML元素的属性名称，下面是一个修改元素align属性名称的示例：
<!DOCTYPE html>
<html>
<head>
<title>JS修改属性名称示例</title>
</head>
<body>
<div id="myDiv" align="center">初始文本内容</div>
<button onclick="changeAttributeName()">修改属性名称</button>
<script>
function changeAttributeName() {
var div = document.getElementById("myDiv");
div.setAttribute("align", "left");
}
</script>
</body>
</html>
在这个示例中，用户点击按钮后，通过JS的代码获取div元素并使用setAttribute函数修改其align属性名称的值为“left”，从而实现动态修改HTML元素属性名称的效果。
六、JS修改display属性
JS可以通过修改元素的display属性值，动态改变元素的显示或隐藏状态，下面是一个修改display属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>JS修改display属性示例</title>
</head>
<body>
<div id="myDiv" style="display: block">初始文本内容</div>
<button onclick="changeDisplay()">修改display属性</button>
<script>
function changeDisplay() {
var div = document.getElementById("myDiv");
div.style.display = "none";
}
</script>
</body>
</html>
在这个示例中，当用户点击按钮时，通过JS代码获取div元素并修改其display属性的值为“none”，从而实现动态隐藏这个元素的效果。
七、JS修改样式中的属性值
JS可以通过修改元素样式属性中的值，动态改变元素的外观效果，下面是一个修改border属性值的示例：
<!DOCTYPE html>
<html>
<head>
<title>JS修改样式中的属性值示例</title>
<style>
#myDiv {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="myDiv">初始文本内容</div>
<button onclick="changeBorder()">修改border属性值</button>
<script>
function changeBorder() {
var div = document.getElementById("myDiv");
div.style.border = "2px dashed blue";
}
</script>
</body>
</html>
在这个示例中，初始化时div元素的边框样式是1像素的实线红色边框，用户点击按钮后，通过JS代码获取div元素并修改其border样式属性的值为“2像素的虚线蓝色边框”，从而实现改变元素外观的效果。
八、JS修改属性值的方法
JS可以通过多种方法修改HTML元素的属性值，包括通过.属性名、setAttribute()、style属性等方式，下面是一个示例展示其中的两种修改方法：
<!DOCTYPE html>
<html>
<head>
<title>JS修改属性值的方法示例</title>
</head>
<body>
<div id="myDiv" title="初始标题">初始文本内容</div>
<button onclick="changeAttrValue()">修改属性值</button>
<script>
function changeAttrValue() {
var div = document.getElementById("myDiv");
div.title = "修改后的标题";
div.setAttribute("title", "通过setAttribute修改后的标题");
}
</script>
</body>
</html>
在这个示例中，用户点击按钮后，通过JS代码分别通过.属性名和setAttribute()两种方式修改div元素的title属性值。其中，.属性名的方式是修改div元素title属性的值为“修改后的标题”；而setAttribute()的方式是修改div元素title属性的值为“通过setAttribute修改后的标题”。
九、JS修改属性无法push
在JS中，某些属性是无法直接使用push()方法进行添加的，下面是一个修改classList属性的示例，演示了如何使用classList的add()和remove()方法而不是push()方法：
<!DOCTYPE html>
<html>
<head>
<title>JS修改属性无法push示例</title>
<style>
.myClass {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p id="myPara" class="myClass">初始文本内容</p>
<button onclick="addClass()">添加class样式</button>
<button onclick="removeClass()">删除class样式</button>
<script>
function addClass() {
var paras = document.getElementById("myPara").classList;
paras.add("newClass");
}
function removeClass() {
var paras = document.getElementById("myPara").classList;
paras.remove("myClass");
}
</script>
</body>
</html>
在这个示例中，用户可以通过点击按钮来使用classList的add()方法来添加新的class样式或者使用remove()方法来删除已有的class样式。classList属性是一个只读属性，因此不能使用push()方法来修改属性值。
十、JS修改div属性
在处理DOM元素的过程中，JS可以修改HTML元素中的所有属性，包括div元素，下面是一个修改div元素背景颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>JS修改div元素属性示例</title>
</head>
<body>
<div id="myDiv" style="background-color: yellow">初始文本内容</div>
<button onclick="changeBackground()">修改背景颜色</button>
<script>
function changeBackground() {
var div = document.getElementById("myDiv");
div.style.backgroundColor = "blue";
}
</script>
</body>
</html>
在这个示例中，初始化时div元素的背景颜色是黄色的，用户点击按钮后，通过JS代码获取div元素并修改其style属性中backgroundColor属性的值为“blue”，从而实现动态修改div元素背景颜色的效果。
