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. ...
随机推荐
- mac 安装 office
1.下载word2016,可以网上搜一下,很多资源 当然这里将我用的版本提供给你: 链接: https://pan.baidu.com/s/1mix07lY 密码: asgc 一直默认下一步进行安 ...
- Git的提交忽略文件
.gitingore文件内容如下 /target//.settings//.classpath/.project/logs/
- ThinkPHP 3.1、3.2一个通用的漏洞分析
Author:m3d1t10n 前两天看到phithon大大在乌云发的关于ThinkPHP的漏洞,想看看是什么原因造成的.可惜还没有公开,于是就自己回来分析了一下. 0x00官方补丁(DB.class ...
- qs库使用
1.npm地址 https://www.npmjs.com/package/qs 2.概述 将url中的参数转为对象: 将对象转为url参数形式 3.示例 import qs from 'qs'; c ...
- apue学习笔记（第四章 文件和目录）
本章将描述文件系统的其他特性和文件的性质. 函数stat.fstat.fstatat和lstat #include <sys/stat.h> int stat(const char *re ...
- ps快捷键记录
alt+delete 前景色填充 ctrl+delete 背景色填充 alt+shift+鼠标调节 变换选取,做圆环 ctrl+t 自由变换 alt+鼠标拖动 快捷复制某区域 delete ...
- Html5上传插件封装
前段时间将flash的上传控件替换成使用纯js实现的,在此记录 1.创建标签 <div class="camera-area" style="display:inl ...
- Nginx绑定多个域名的方法
nginx绑定多个域名可又把多个域名规则写一个配置文件里,也可又分别建立多个域名配置文件,我一般为了管理方便,每个域名建一个文件,有些同类域名也可又写在一个总的配置文件里. 一.每个域名一个 ...
- Spring学习四----------Bean的配置之Bean的配置项及作用域
© 版权声明:本文为博主原创文章,转载请注明出处 Bean的作用域(每个作用域都是在同一个Bean容器中) 1.singleton:单例,指一个Bean容器中只存在一份(默认) 2.prototype ...
- 程序猿的量化交易之路（32）--Cointrade之Portfolio组合（19）
转载须注明出处:http://blog.csdn.net/minimicall?viewmode=contents,http://cloudtrade.top/ Portfolio:组合,代表的是多个 ...