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. ...
随机推荐
- 传输层：UDP 协议
一.传输层协议 从之前介绍的网络层协议来看,通信的两端是两台主机,IP 数据报首部就标明了这两台主机的 IP 地址.但是从传输层来看,是发送方主机中的一个进程与接收方主机中的一个进程在交换数据,因此, ...
- django网站搭建常用的一些代码
from functools import wrapsdef check_user_login(func): @wraps(func) def return_wrapper(request, *arg ...
- 24. Spring Boot环境变量读取和属性对象的绑定【从零开始学Spring Boot】
转:http://blog.csdn.net/linxingliang/article/details/52069509 凡是被spring管理的类,实现接口EnvironmentAware 重写方法 ...
- 关于Blind XXE
关于Blind XXE 关于XXE,很早之前内部做过分享,个人觉得漏洞本身没太多的玩点,比较有意思主要在于:不同语言处理URI的多元化和不同XML解析器在解析XML的一些特性. 在科普Blind XX ...
- 分析cocos2d-x的lua项目中的工具方法
在创建完cocos2d-x的lua项目后.打开项目的Resources中的extern.lua文件.里面有两个用于面向对象的方法.一个是用于克隆,一个是用于继承. 代码分析例如以下 --克隆一个对象 ...
- 《Head First 设计模式》学习笔记——观察者模式 + 装饰者模式
装饰者模式是JDK中还有一个使用较多的设计模式,上一个是观察者模式(在Swing中大量使用),业内好的API设计无一离不开常见的设计模式,通常我们所说要阅读源代码,也是为了学习大牛们的设计思路.--- ...
- 高阶函数：map()/reduce()
Python内建了map()和reduce()函数. 如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on Large Clus ...
- java 开发环境安装
一.在mac上安装jdk 1. 下载Mac版本的JDK并安装 http://www.oracle.com/technetwork/java/javase/downloads/index.ht ...
- 【C语言天天练（二）】statickeyword
引言: statickeyword不仅能够修饰变量.并且能够修饰函数.了解它的使用方法,不仅对阅读别人的代码有帮助,也有助于自己写出更加健壮的程序. 使用方法: ...
- SpringBoot启动流程分析（四）：IoC容器的初始化过程
SpringBoot系列文章简介 SpringBoot源码阅读辅助篇: Spring IoC容器与应用上下文的设计与实现 SpringBoot启动流程源码分析: SpringBoot启动流程分析(一) ...