本文目录
- js如何添加CSS样式中的class添加属性
- 用JavaScript给所有相同的class添加CSS样式
- 如何通过js给css添加样式
- JS里添加样式
- 怎样用JS来添加CSS样式
- 微信小程序js添加css样式
- 怎么在js中给文本框添加CSS样式
- JS控制CSS 鼠标滑过就加栽新的CSS样式
js如何添加CSS样式中的class添加属性
js不可修改css中的属性,只能为指定的class的元素添加内联样式(style)原生JS:var dom = document.getElementsByClassName(’dtd’);for(var i=0,len=dom.length; i《len; i++){ dom.style.color = ’red’;}Jquery$(’.dtd’).css({color:’red’});
用JavaScript给所有相同的class添加CSS样式
《!doctype html》《html lang="en"》 《head》 《meta charset="UTF-8"》 《meta name="Generator" content="EditPlus"》 《meta name="Author" content=""》 《meta name="Keywords" content=""》 《meta name="Description" content=""》 《title》Document《/title》 《/head》 《body》 《div id="container" style="width: 480px; height: 220px;border:1px solid #e3e3e3;" onclick="renderLink();"》 《a href="#" class="mya"》Test1《/a》 《a href="#"》Test2《/a》 《a href="#" class="mya"》Test3《/a》 《a href="#" class="mya"》Test4《/a》 《a href="#" class="mya"》Test5《/a》 《a href="#"》Test6《/a》 《/div》 《/body》《/html》《script type="text/javascript"》 function renderLink(){ var alist = document.getElementsByClassName("mya"); if(alist){ for(var idx = 0; idx 《 alist.length; idx ++){ var mya = alist; mya.style.color = "red"; mya.style.fontSize = "36px"; } } } 《/script》
先用document.getElementsByClassName("className")取得所有class为className的元素,再循环添加样式即可,如果用JQuery会简单很多;也可以自己用JS封装一个函数实现JQuery一样的效果
如何通过js给css添加样式
选中标签,然后用style设置样式
《div id="h5course"》HTML5学堂(WX号),技术干货文章分享《/div》《script》var box = document.getElementById(’h5course’);box.style.color = ’#39f’;box.style.border = ’2px solid #000’;《/script》
JS里添加样式
JS里添加样式的方法:
1、首先,要创建标签,使用document.createElement函数,如图创建div标签。使用其className设置class,id设置id,style设置样式。
2、样式的设置也可以分项进行。如图是分项设置其left,top,display,position,width几个样式。
3、通过设置标签的innerHTML属性可以直接给其添加子标签以及子标签的样式。当然,也可以分项分层添加标签。
4、设置好标签(如图是div标签,变量名box),使用document.body.appendChild添加标签到body当中。
5、标签添加以后,依然可以修改样式,如图是使用document.getElementById方法根据id获取标签,修改style。
6、标签添加以后,也可以给其添加和删除event处理。如图是使用jQuery给id为img-preview-box的标签添加hover鼠标经过的处理。
怎样用JS来添加CSS样式
例如改变背景色:1234567《div id="changeColor"》使用JS改变背景色《/div》《script》var cc = document.getElementById("changeColor");cc.style.backgoundColor="#000"; //将背景色改为黑色cc.style.fontSize="20px"; // 将文字大小改为20px,等号右边也可以写为20+"px"cc.style.color="#fff"; //将文字颜色改为白色《/script》
微信小程序js添加css样式
给你个小例子,
wxml 里面
《button bindtap="changeColor" hover-class="none"》点击修改背景颜色《/button》
js
Page({
data: {
pageBackgroundColor:’#5cb85c’
},
onLoad: function () {},
// 改变背景颜色
changeColor: function() {
var bgColor = this.data.pageBackgroundColor == ’#e43a3d’ ? ’#5cb85c’ : ’#e43a3d’;
// 设置背景颜色数据
this.setData( {
pageBackgroundColor: bgColor
} );
}
})
怎么在js中给文本框添加CSS样式
在页面内用JS操作CSS除非用AJAX,但操作页面内的样式的话,是可以的。操作样式分为改变直接样式,改变className和改变cssText三种一、局部改变样式 调用方法: 改变className《div id="demo"》测试《/div》《script》document.getElementById(’demo’).className="test"; 《/script》改变直接样式《div id="demo"》测试《/div》《script》document.getElementById(’obj’).style.backgroundColor="#003366"; 《/script》二、全局改变样式 可以通过改变外链样式的的href的值实现网页样式的实时切换《link rel = "stylesheet" type="text/css" id="css" href="firefox.css" /》 《span on click="javascript:document.getElementById(’css’).href = ’ie.css’"》点我改变样式《/span》
JS控制CSS 鼠标滑过就加栽新的CSS样式
《style》 .abc{xxxx} .bcd{xxxx}《/style》比如《li id="abc" class="abc"》《/li》《script》 var abc=document.getElementById("abc"); abc.onmouseover=function(){ this.className="bcd"; this.onmouseout=function(){ this.className="abc" } }《script》