javascript 动态修改css样式
方法一:改变外联css文件,这里不讲这个。
方法二:通过改变claaName来改变样式,语法:
obj.className = "style2"; //或者 obj.setAttribute("class", "style2");
方法三:使用obj.style.cssTest,语法:
obj.style.cssText = " display:block; color:White;“
这个方法优点:
可以这样添加好几个属性。
缺点:会把obj原来的cssText清掉,解决方案:使用累加,语法:
obj.style.cssText += " display:block; color:White;“
上面cssText累加的方法在IE中是无效的。
然而,可以在前面添加一个分号来解决这个问题:
obj.style.cssText += " ; display:block; color:White;“
注意:如果前面有样式表文件写着 div { text-decoration:underline; },这个会被覆盖吗?不会!因为它不是直接作用于 HTML 元素的 style 属性。
方法四: 使用obj.style.backgroundColor,语法:
obj.style.backgroundColor= "black";
注意:backgroundColor可以换成其他属性,这里仅是示例,比如color,position等。
最后一个知识点:css Sprite,
就是有一张大图,通过控制background-position来实现显示大图的某一部分。可以用来制作动画。这个大图是作为background-image:。
优点是减少http请求,缺点是定位麻烦。维护麻烦。
具体用法请移步:https://blog.csdn.net/u011349149/article/details/24181675
javascript 动态修改css样式的更多相关文章
- javascript 动态修改css样式方法汇总(四种方法)
在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...
- ASP.NET中直接用C# 动态修改CSS样式
ASP.NET中直接用C# 动态修改CSS样式 wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...
- JS笔记一:动态修改css样式
---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...
- JavaScript动态修改CSS
链接:https://www.cnblogs.com/aademeng/articles/6279060.html 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几 ...
- 使用JavaScript动态更改CSS样式
在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...
- JavaScript访问修改css样式表
1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...
- 微信小程序通过js动态修改css样式的方法(交流QQ群:604788754)
WXML <view class="page" style="background-color:{{pageBackgroundColor}}" > ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字
有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字(转载)
原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...
随机推荐
- 背水一战 Windows 10 (112) - 通知(Badge): application 的 badge 通知, secondary 的 badge 通知, 轮询服务端以更新 badge 通知
[源码下载] 背水一战 Windows 10 (112) - 通知(Badge): application 的 badge 通知, secondary 的 badge 通知, 轮询服务端以更新 bad ...
- Java常见开发规范
1 背景概述 作为程序员大军中的一员,笔者工作于沈阳数通畅联软件技术有限公司.在任职工作的第一天就听领导强调开发规范的重要性,但是笔者心里还想为什么开发规范是最重要的,难道是不应该是实现功能就万事大吉 ...
- 【高速接口-RapidIO】1、RapidIO协议概述
一.RapidIO背景介绍 RapidIO是由Motorola和Mercury等公司率先倡导的一种高性能. 低引脚数. 基于数据包交换的互连体系结构,是为满足和未来高性能嵌入式系统需求而设计的一种开放 ...
- BATJ等公司必问的8道Java经典面试题,你都会了吗?
1.谈谈你对 Java 平台的理解?“Java 是解释执行”,这句话正确吗? 考点分析: 对于这类笼统的问题,你需要尽量表现出自己的思维深入并系统化,Java 知识理解得也比较全面,一定要避免让面试官 ...
- Javascript高级编程学习笔记(34)—— 客户端检测(3)用户代理检测
用户代理检测 前面的文章介绍的是如何检测浏览器对某一功能的支持情况 但是在实践中我们有些时候免不了需要知道用户到底是用的什么浏览器对我们的站点进行访问 这也是统计用户行为的一部分 用户代理检测这种方式 ...
- node.js服务器搭建
//1.导入http 核心模块 const http = require("http"); //2.调用http.createServer 方法,创建一个web 服务器对象 con ...
- centos6安装cas5
cas是Central Authentication Service的缩写,中文为中央认证服务,在这里我就不说理论了,在公司里项目研发需要cas平台,所以经过两天研究,搞了一个简化版的cas服务,有不 ...
- 免费开源的diff软件“meld”-替代beyond compare的神器
命令行直接对比文件 meld dir1 dir2 & 1,安装 mld, 可以选择windows, linux, macos系统,都有提供安装. ubuntu 中安装: sudo apt-ge ...
- python高级-深浅拷贝(16)
一.浅拷贝 浅拷贝是对一个对象的顶层拷贝,通俗地讲就是:拷贝了引用,并没有拷贝内容. a = [1,2,3] print(id(a)) b=a print(b) print(id(b)) a.appe ...
- 漫谈golang之fmt格式化模块
fmt 漫谈 Go Walkthrough: fmt fmt常用的格式化字符串 %v 是个通用的占位符.它会自动将变量转换为默认格式的字符串,这在打印字符串或数字等原语时非常有用,而且不需要特定的选项 ...