JavaScript对css样式表操作
2024-03-25 01:22:22
CSS样式表3种方式：
内嵌：写在html标签中的样式 ；如：<p style="width:100px"> 内嵌</p>
内联：写在html 中<head></head>之间的样式表
<head>
<style>
</style>
</head>
外联：通过<head>标签中的<link >标签中链接的css样式表
js对内嵌操纵：
<p style="width:100px" id="p"> 内嵌</p>
var p=document.getElementById("p");
p.style.width="200px";
将p标签的宽度改为了200px；
js操作内联样式：
<script type="text/javascript">
方法一：
function getStyle(selector, attr) {
for(i = 0, len = document.styleSheets.length; i < len; i++) {
var rules;
if(document.styleSheets[i].rules) {
/*for ie*/
rules = document.styleSheets[i].rules;
} else {
/*for 非ie*/
rules = document.styleSheets[i].cssRules;
}
for(j = 0, rlen = rules.length; j < rlen; j++) {
if(rules[j].selectorText == selector) {
alert(rules[j].style[attr]);
}
}
}
}
</script>
方法二：
<script type="text/javascript">
IE：elementObj.currentStyle
w3c标准：window.getComputedStyle(elementObj, null) 或 document.defaultView.getComputedStyle(elementObj, null )
document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(id,null).getPropertyValue("background-color"):id.currentStyle["backgroundColor"];
</scirpt>
最新文章
- ERROR [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名
- MINA系列学习-mina整体介绍
- Runtime Error---Description: An application error occurred on the server....
- javascript思维导图
- redis 应用场景
- RRDTool 存储原理简介——基于时间序列的环型数据库
- web services 接口测试方法
- Swift 析构器deinit
- lightoj 1236 正整数唯一分解定理
- debian安装jdk8
- 业务系统需要什么样的ID生成器
- headless
- Ext JS 6学习文档–第1章–ExtJS入门指南
- swiper轮播问题之二：默认显示3张图片，中间显示全部两边显示部分
- Bootstrap表单验证
- ASP.NET -- WebForm -- 页面生命周期事件
- springboot启动配置原理之一（创建SpringApplication对象）
- diskpart 格式化u盘 制作u盘启动盘方法
- 解决 'findstr' 不是内部或外部命令，也不是可运行的程序或批处理文件 提示问题
- Java程序员面试之葵花宝典