js中添加样式(javascript 添加样式)

在网页制作中，我们常常需要通过添加样式来美化页面，使其更加美观和易于阅读。而javascript作为一种常用的脚本语言，也可以用来添加样式。本文将详细介绍javascript添加样式的方法及示例应用。 一、使用javascript添加样式 javascript可以通过修改元素的style属性来实现添加样式的效果。下面是一个简单的例子，通过javascript添加红色文字样式：

//获取对象
var txt = document.getElementById("text");
//修改样式
txt.style.color = "red";

二、修改元素样式 通过修改元素样式，我们可以实现各种各样的效果，例如改变文字颜色、字体、大小、背景颜色等等。 修改文字颜色：

//获取对象
var txt = document.getElementById("text");
//修改样式
txt.style.color = "red";

修改文字大小：

//获取对象
var txt = document.getElementById("text");
//修改样式
txt.style.fontSize = "20px";

修改文字字体：

//获取对象
var txt = document.getElementById("text");
//修改样式
txt.style.fontFamily = "Arial";

修改背景颜色：

//获取对象
var txt = document.getElementById("text");
//修改样式
txt.style.backgroundColor = "#eee";

三、应用示例 下面是一些常见的应用示例，供大家参考。 1. 动态改变图片大小

//获取对象
var img = document.getElementById("img");
//定义变量
var imgWidth = 100;
var imgHeight = 100;
//动态修改样式
img.style.width = imgWidth + "px";
img.style.height = imgHeight + "px";

2. 鼠标移入移出改变背景颜色

//获取对象
var box = document.getElementById("box");
//添加事件
box.onmouseover = function(){
box.style.backgroundColor = "#ccc";
}
box.onmouseout = function(){
box.style.backgroundColor = "#fff";
}

3. 点击按钮隐藏/显示元素

//获取对象
var btn = document.getElementById("btn");
var box = document.getElementById("box");
//添加事件
btn.onclick = function(){
if(box.style.display == "none"){
box.style.display = "block";
}else{
box.style.display = "none";
}
}

四、总结 本文介绍了javascript添加样式的方法及应用示例，从中我们可以看到，javascript添加样式可以实现各种各样的效果，而且非常灵活简便，也更加符合网页开发的实际需求。希望本文能对大家有所帮助，谢谢收看！