js动态改变css样式

动态改变页面元素样式：

使用getElement系列方法访问元素。
改变样式属性：style属性；className属性。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="application/javascript" src="js/动态改变css.js"></script><style type="text/css">.menu{width: 100px;height: 30px;border-top-left-radius:10px ;border-top-right-radius: 10px;background-color: darkgray;text-align: center;padding-top: 4px;}.menuOver{background-color: orange;width: 100px;height: 30px;border-top-left-radius:10px ;border-top-right-radius: 10px;text-align: center;padding-top: 4px;}.menuOut{background-color: darkgray;width: 100px;height: 30px;border-top-left-radius:10px ;border-top-right-radius: 10px;text-align: center;padding-top: 4px;}.first_ul{list-style: none;}.first_ul li{float: left;background-color: #F79337;font-size: 14px;font-weight: bold;color: white;border-radius: 5px;      width: 70px;height: 30px;text-align: center;    padding-top: 10px;  }</style></head><body><!--修改css样式，单击：onclick--><div id="content1">DIV样式</div><input type="button" name="" id="" value="改变样式" οnclick="btn1()";/><hr /><!--鼠标移入onmouseover移出onmouseout鼠标按钮按下--><div id="menuObj" class="menu" οnmοuseοver="setMenuBgColor(this,1)"; οnmοuseοut="setMenuBgColor(this,2)";>商品类别</div><hr /><!--同时改变所有li的样式--><ul class="first_ul"><li>首页</li><li>家用电器</li><li>手机数码</li><li>日用百货</li><li>书籍</li></ul></body>
</html>

function btn1(){/** 改变div元素背景* 元素中间横线去掉，第二个首字母也大写*/document.getElementById("content1").style.backgroundColor="red";
}//利用obj参数传入this可以使方法复用
function setMenuBgColor(obj,flag){switch(flag){case 1:
//          1.通过对象中的style属性来修改css样式效果
//          鼠标移入
//          document.getElementById("menuObj").style.backgroundColor="orange";
//          obj.style.backgroundColor="orange";
//          2.通过类选择器来修改CSS样式效果obj.className = "menuOver";        //只需要加样式名，不用.break;case 2:
//          鼠标移出
//          document.getElementById("menuObj").style.backgroundColor="darkgray";
//          obj.style.backgroundColor="darkgray";        obj.className = "menuOut";break;}
}window.οnlοad=function(){
//  同时改变所有li的样式var objli=document.getElementsByTagName("li");for (var i=0;i<objli.length;i++) {objli[i].οnmοuseοver=function(){this.style.backgroundColor="red";}objli[i].οnmοuseοut=function(){this.style.backgroundColor="#F79337";}}
}

js动态改变css样式相关推荐

如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
用js动态改变css样式表（亲测可以）
一.对于响应式布局可以使用@media与@media screen(媒体查询)进行响应式布局. 二.对于非响应式页面可以采用以下方法: 用setAttribute方法实现一个页面两份样式表 ...
实现js动态设置css样式，js动态设置全局样式主题色
需求: 1.设置一个全局的样式 2. 样式是需要动态改变的,改变的内容是通过请求后台接口获取的,因此需要js能够对css进行改变实现: 或许你可能不相信,代码只需要几行 js代码: // 设置主题色 ...
关于jquery动态改变css样式后，对象获取不到的解决办法
2019独角兽企业重金招聘Python工程师标准>>> 情况如下: <!DOCTYPE html> <html><head><meta ch ...
jq动态修改css样式表,jquery 动态改变css样式
jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接 ...
js动态修改css样式
//获取一个HTMLCollections,可以理解为HTML元素数组 var list = document.getElementsByClassName("block"); / ...
js里设置html样式,JS 动态设置css样式
1.0 内联样式 : 通过行内样式.style 属性来编辑给定的HTMLElement的内联样式 let el = document.createElement('div') ; 01) . el. ...
jquery怎么动态修改css样式
jquery动态修改css样式的方法:1.通过css方法动态修改css样式:2.给指定的html元素定一个CSS样式:3.查看元素的css样式:4.隐藏与显示p或指定的其他html元素. jquery ...
用JS来动态设置CSS样式
常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 ...

js动态改变css样式

js动态改变css样式相关推荐

最新文章

热门文章