本文目录一览:
- 1、js 怎么通过class改变样式
- 2、js和jq怎么修改className然后怎么能对其className操作
- 3、js获取ClassName后,怎样设置元素宽度
- 4、现在自学JavaScript,发现无法用JS改变ID里面的className的属性,求大神教教我!
- 5、如何使用JavaScript的className属性改变网页的样式?
js 怎么通过class改变样式
js通过class改变样式,可以使用Dom的className属性设置元素的样式。完整示例代码如下:
!DOCTYPE html
html
head
meta charset="utf-8"
title测试页面/title
style type="text/css"
.themeCls {
color: #000;
background-color: #f60;
line-height: 25px;
}
/style
/head
body style="background-color:#ccc;"
span id="theme"这是一段测试文本br /用来测试js通过class改变样式/span
script type="text/javascript"
var domTheme = document.getElementById("theme");
theme.className = "themeCls";
/script
/body
/html
具体操作步骤如下:
1、新建一个html文件,命名为t.html。
2、打开t.html。
3、在t.html中写入html结构代码,其中设置需要添加class类的元素的ID为“theme”。代码如下:
!DOCTYPE html
html
head
meta charset="utf-8"
title测试页面/title
/head
body style="background-color:#ccc;"
span id="theme"这是一段测试文本br /用来测试js通过class改变样式/span
/body
/html
4、设置一个css类,命名为”themeCls”,用于在javascript操作时给元素添加clsss。”themeCls”类为了方便观察效果,设置css规则为字体颜色为黑色#000,背景为橙色#f60,行高为25像素。代码如下:
style type="text/css"
.themeCls {
color: #000;
background-color: #f60;
line-height: 25px;
}
/style
5、编写javascript代码,获取ID为“theme”的元素并设置元素的class类为“themeCls”,代码如下:
script type="text/javascript"
var domTheme = document.getElementById("theme");
domTheme .className = "themeCls";
/script
6、打开浏览器,浏览t.html页面,发现页面中”这是一段测试文本用来测试js通过class改变样式”这一段文本字体颜色呈现黑色,背景呈现橙色,说明我们为元素添加class类“themeCls”成功了。
js和jq怎么修改className然后怎么能对其className操作
js修改class的几种方法:
var div = document.getElementById('div');
// 方法一
div.setAttribute('class', 'style1 style2');
// 方法二
div.className = 'style1 style2';
jQuery修改Class的方法
var div = document.getElementById('div');
$('#div').attr('class','style5 style6');
js获取ClassName后,怎样设置元素宽度
并没有getElementByClassName()这个函数,只有getElementsByClassName(),Element后面有个s,这个返回来是多个节点的集合(因为class名有可能匹配到多个),假设只有1个元素用这个class名,那么要改变宽度可以:
var a=document.getElementsByClassName("a");
a[0].style.width="500px";
望采纳,谢谢
现在自学JavaScript,发现无法用JS改变ID里面的className的属性,求大神教教我!
首先你这段代码中是存在问题的:使用getElementsByClassName来获取元素,得到的是记录集,需要使用循环或者指定的位置如[0]来操作。
其次,你是想知道JavaScript改变id里面的指定class的样式最近的方式如下:
将里面的name为ts的div绑定id,然后获取该id指定id的classname的方式来改变class样式,代码如下:
document.getElementById("tsid").className="tss";
如何使用JavaScript的className属性改变网页的样式?
网页的样式一般都定义在了css的文件中,而JavaScript中的className的属性能让css中的样式动态的应用到网页的元素上。比如,在css中有样式.example。代码如下:
.example {
color: #fff;
font-size 1em;
text-align: right;
}
要用JavaScript动态的应用到网页上,可以使用如下类似的代码:
function preparePage() {
//当mainContent元素被点击,mainContent的样式将会改变
document.getElementById("mainContent").onclick = function() {
//检查当前mainContent的样式,若是example,则将样式取消。
//取消样式直接将className属性赋值为空字符串””就行。
//若mainContent的样式不是example,则应用example样式。
if( document.getElementById("mainContent").className == "example") {
document.getElementById("mainContent").className = "";
} else {
document.getElementById("mainContent").className = "example";
}
};
}
window.onload = function() {
preparePage();
}
通过上面的JavaScript代码,我们可以通过点击来控制mainContent元素的样式。上面的代码是从秒秒学上扣出来的,如果你想要完整的案例,可以在秒秒学的《使用JavaScript美化界面》一章中找到。