下面是JS中style属性的完整攻略：
1. 简介
在JavaScript中，我们可以使用style属性来修改HTML元素的样式。style属性是一个对象，在该对象中，我们可以使用CSS属性名作为属性名称，将CSS属性值作为属性值，来设置HTML元素的样式属性。
2. 基本用法
style属性在DOM中表示一个元素的样式，可以通过以下方式访问：
var element = document.getElementById("example");
element.style
通过上面的代码，我们可以获取到id为"example"的元素对象，然后通过element.style来访问该元素的样式。
接下来，我们可以使用CSS属性名作为属性名称，将CSS属性值作为属性值，来设置HTML元素的样式属性。
例如，下面的代码设置了id为"example"的元素的背景颜色和字体颜色：
var element = document.getElementById("example");
element.style.backgroundColor = "red";
element.style.color = "white";
3. 可以设置的样式属性
style属性可以设置HTML元素的大部分CSS样式属性，例如：
- width
- height
- background-color
- color
- font-size
- font-family
- margin
- padding
- border
- ...
4. 示例说明
下面是两条示例说明：
示例一
<!DOCTYPE html>
<html>
<body>
<p id="example">JavaScript修改样式示例</p>
<script>
var element = document.getElementById("example"); // 获取元素对象
element.style.backgroundColor = "blue"; // 修改背景颜色
element.style.color = "white"; // 修改字体颜色
element.style.border = "1px solid black"; // 修改边框
element.style.padding = "10px"; // 修改内边距
element.style.margin = "10px"; // 修改外边距
element.style.fontSize = "20px"; // 修改字体大小
element.style.fontFamily = "Arial"; // 修改字体
element.style.width = "200px"; // 修改宽度
element.style.height = "100px"; // 修改高度
</script>
</body>
</html>
通过上面的代码，我们可以修改一个段落元素的样式，设置背景颜色、字体颜色、边框、内边距、外边距、字体大小、字体和宽度、高度等样式属性。
示例二
<!DOCTYPE html>
<html>
<body>
<h1 id="example">JavaScript设置CSS样式示例</h1>
<script>
function changeStyle() {
var element = document.getElementById("example"); // 获取元素对象
element.style.backgroundColor = "red"; // 修改背景颜色
element.style.color = "white"; // 修改字体颜色
element.style.fontSize = "30px"; // 修改字体大小
element.style.fontFamily = "Arial"; // 修改字体
element.style.textAlign = "center"; // 修改文本对齐方式
element.style.padding = "20px"; // 修改内边距
element.style.margin = "10px"; // 修改外边距
}
// 点击按钮触发样式修改事件
document.getElementById("btn").addEventListener("click", changeStyle);
</script>
<button id="btn">修改样式</button>
</body>
</html>
通过上面的代码，我们可以动态修改HTML元素的样式，通过一个按钮触发事件来修改文字的背景颜色、字体颜色、字体大小、字体、文本对齐方式、内边距、外边距等样式属性。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS中style属性 - Python技术站
微信扫一扫 
支付宝扫一扫 