javascript控制样式表(不常用)
<html>
<head>
<title>Example XHTML page</title>
<link href="css1.css" rel="stylesheet" />
<link href="css2.css" rel="stylesheet" />
<style>
body{ background: #ccc;}
</style>
</head>
<body>
<div id="myDiv" style="background-color:blue;width:10px;height:25px;"></div>
<script>
/**
* 控制样式(行内样式)
*/
var myDiv = document.getElementById("myDiv");
myDiv.style.cssText = "width:100px; height:100px; background-color:green;border:2px solid #f00;";//一次性设置多个样式
myDiv.style.removeProperty("border");//删除样式
//迭代样式
for(var i=0, len=myDiv.style.length; i<len; i++){
var prop = myDiv.style[i];//或者myDiv.style.item(i)
value = myDiv.style.getPropertyValue(prop);
console.log(prop+':'+value);
}
/**
* 操作样式表(CSS):包括页面中style的样式(不常用)
*/
var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets","2.0");
console.log(supportsDOM2StyleSheets);//判断是否支持DOM2级的样式表
var style1 = document.styleSheets[0];//css1.css
var style2 = document.styleSheets[1];//css2.css
var style3 = document.styleSheets[2];//页面中的style样式表
console.log(style1);//获取第一个样式表
console.log(style2);//获取第二个样式表
console.log(style3);//获取第三个样式表
//添加样式规则
style1.insertRule("div { border:1px solid #ff0}",0);//非IE
style1.addRule("div","border:1px solid #ff0",0);//IE
//deleteRule 删除规则 removeRule IE
</script>
</body>
</html>
css1：
div{
width:100px;
height: 100px;
}
css2：
a{
width: 500px;
height: 100px;
}
javascript控制样式表(不常用)的更多相关文章
- JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)
层叠样式 表和动态HTML 层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准. 使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...
- CSS样式表之常用文本属性
断更了两周了,因为纠结之后在学java啦,但是还是要把学过的前端知识更完 以下的一些文本属性是CSS最常用的属性: [长度单位]:px(像素) [颜色单位]: 十六进制:#ffffff 分别对应红绿蓝 ...
- JavaScript实现样式表的简单切换
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JavaScript控制阻止表单提交
1.在表单上使用onSubmit方法 <?php $form = ActiveForm::begin([ 'options'=>[ 'class' => 'form-horizont ...
- 美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
- 漂亮的表格样式(使用CSS样式表控制表格样式)
根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...
- 漂亮的表格样式–>使用CSS样式表控制表格样式
依照WEB2.0风格,设计了几个表格样式,希望大家喜欢.WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择.现在介绍使用CSS样式表来控制.美化表格的方法. ...
- Qt样式表之二：QSS语法及常用样式
一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
随机推荐
- yield理解
http://www.jianshu.com/p/d09778f4e055 从yield处返回一个值,下次从yield后开始执行
- 在windows搭建jenkins測试环境
jenkins 搭建好开发环境必备之中的一个,简单易用,搭建測试平台非常有帮助,不知道的都能够了解一下 官网下载地址 http://jenkins-ci.org/ 我是下载window版本号的 安装有 ...
- HTML5 Canvas 绘制澳大利亚国旗
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- 用PROXYCHAINS实现SSH全局代理
NUX下可以实现SSH全局代理的软件有tsocks和proxychains两种,但是个人感觉proxychains要更加稳定简单. $ yum install proxychains # vim /e ...
- cocos2d-x 3.0游戏实例学习笔记 《跑酷》移植到android手机
说明:这里是借鉴:晓风残月前辈的博客.他是将泰然网的跑酷教程.用cocos2d-x 2.X 版本号重写的,眼下我正在学习cocos2d-X3.0 于是就用cocos2d-X 3.0重写,并做相关笔记 ...
- 实用国际(XX)计量单位表
很多实用附录简表:http://www.zdic.net/appendix/f1.htm 计量单位简表 时间的单位换算 : 1秒=1000毫秒(ms) 1毫秒=1/1,000秒(s) 1秒=1,00 ...
- View的滚动原理简单解析
一直对View的滚动了解的不深,说明确了吧也能说出个所以然来,所以我就花了点时间做了一个小小的总结,言归正传,view的滑动分为下面三种: 1)View本身不滚动,指滚动View的内容,这也是View ...
- java nio读取和写入文件
读取 package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputS ...
- java.util.Date和java.sql.Date之间的转换
java.util.Date是在除了SQL语句的情况下面使用的.java.sql.Date是针对SQL语句使用的,它只包含日期而没有时间部分它 们都有getTime方法返回毫秒数,自然就可以直接构建. ...
- java中的双重锁定检查（Double Check Lock)
原文:http://www.infoq.com/cn/articles/double-checked-locking-with-delay-initialization#theCommentsSect ...