CSS样式定义方法

大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表

1、内联样式:

  内联样式表就是在HTML元素中的行内直接添加style属性。

 <div id="div1" style="width: 100px; height: 100px; background: black">
</div>

2、内部、外部样式表:

  内部样式表就是在<head>头部里有<style>标签,外部样式表<link>标签引用的外部样式表文件(*.css)。

 <head>
<style>
  #div1 { width:200px; height:200px; background:black} //这里是内部样式表
</style>
<link rel="stylesheet" type="text/css" href="example.css" > //这里是外部样式表,引用了外部的example.css文件
</head>

   通常来说,内部样式表会比较少用,为了使HTML文档中看起来更简洁,一般脚本程序和样式表都是从外部引用的。


CSS样式表定义的优先级 

  说完了关于样式表的定义方法之后,我们再了解一下CSS样式表定义的优先级。(我们这里只是简单说一下,这三种CSS样式的优先级关系,有关CSS选择器的优先级,会单独再开一帖)

  有一句话是这样说的:近水楼台先得月。从这个方面去想就可以很清楚了。

  浏览器默认属性<外部样式表<内部样式表<内联样式

  当样式定义有重复时,会优先使用最内层的样式定义。所以我们一般做样式修改时候,修改的便是内联样式或者是用类选择器修改样式


查看CSS属性

  1、查看内联样式

  查看CSS属性,一般大家最常用的,最了解的一种方法就是用 object.style.***

 <script>
window.onload = function(){
var oDiv = document.getElementById('div1');
alert( oDiv.style.width ); //"100px" 这里是字符串,显示的是内联样式
}
</script>

  上面那个仅仅是查看内联样式单个属性的,要是有需要查看所有的属性,可以使用obj.cssText或者obj.getAttribute("style");待会儿会详细说明。

  谨记!它们都是无法取得样式表中的属性值。

  object.style 它显示的仅仅是内联样式的属性,即使样式表定义了,用style.width也无法得到它的值(求宽度的话,这个时候大家最好用obj.offsetWidth, 但是获得的不带单位的值,要注意一下)  

  2、查看样式表(getComputedStyle,currentStyle)

  查看样式表的某个属性就没有上面那么简单啦。

  这里要用到一个方法 getComputedStyle(object,null)[name],第二个参数是放伪元素的(:after之类的),如果不需要就要设置为null。

  这个方法厉害了,顾名思义,获得计算后的style,也就是说。你要取得的属性要最后最终确定的样式属性,包括样式表和内联样式。

  

 //内联样式的width删除后

 var divWidth = getComputedStyle(oDiv,null)['width'] 

 alert( divWidth) // "200px" , 这个是样式表中定义的宽度。 IE中不兼容。

  大家也看到了,我在注释上写了个IE不兼容。 这么好的属性,竟然不兼容,可恨!

  不过还好,IE也有它自己定义的方法 obj.currentStyle[name] .代码我就不写啦,和上面差不多。

  让我们来写个可以兼容共用的方法

 function getStyle(obj,name){
if(obj.currentStyle){ //判断浏览器是否拥有该方法
return obj.currentStyle[name];
}else{
return getComputedStyle(obj, null)[name];
}
}

  这样我们就“可以”获取我们想要的CSS属性啦!嗯,专门做个蓝色的坑标注。

  (用这个方法时,name参数必须是完整的且驼峰形的,也就是background-color要写成backgroundColor,缩写什么的当然也不行。还有border,有的浏览器还要分,左框宽,右框宽,这里那么多大坑,我就不一一阐述了。)

  所以大家用这个getStyle(obj,name),务必多加注意!希望各位同学可以多多上手实践感受感受。


修改CSS属性

  终于到了最后一个环节了。

  同样修改CSS属性有几种方法,一个一个来说。

  1、obj.style.xxx = val

    这个是应用最广泛,也是用起来比较得心应手的啦!

    它的原理也就是通过添加内联样式,去覆盖样式表中的样式。

  2、obj.style.cssText = "xxx", obj.setAttribute("style","xxx")

    为什么这两个放在一起说呢?因为,这两个有许多的共通点,但是实际操作我会建议使用前者。

oDiv.setAttribute('style','width:300px') ;  //他们修改的都是内联样式。
oDiv.style.cssText = "width:300px";

    注意! 这两个方法都是会覆写内联样式,就是说,原本的内联样式会被全部清除。而且setAttribute,不兼容IE6这个老古董。

    所以要修改内联样式的属性,可以采用 obj.style.cssText

  3、obj.className = "xxx"

    这个是我们常说的添加class类。这个是通用的,没什么好说。

    如果要用到setAttribute来设置class的话,就要关注到,在IE里是setAttribute("className","xxx")

    而其它浏览器一致都是 setAttribute("class","xxx") 与内联样式的class属性相对应。(不推荐这种方法)


  CSS移除样式。

    对于内联样式,我们可以采用下列的方法。

 oDiv.cssText = ""; //等于移除了所有内联样式,若不需要全部移除,可以补回
oDiv.removeAttribute("style")

    通过清空内联样式,被覆盖的样式表属性,就可以重现天日了。

    当然除了内联样式还有样式表中的类选择器也是可以移除的。

 oDiv.className = "";
oDiv.removeAttribute("class"); //非IE7
oDiv.removeAttribute("className"); //IE7

最后,我抱歉的说一句,我不知道怎么用JS修改样式表中的样式,要是有知道的同学可以留下你的评论。

以上是我的学习小总结,或许有不全面或者错误的地方,欢迎指正!

用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)的更多相关文章

  1. 微信小程序通过js动态修改css样式的方法(交流QQ群:604788754)

    WXML <view class="page" style="background-color:{{pageBackgroundColor}}" > ...

  2. JS笔记一:动态修改css样式

    ---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...

  3. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  4. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...

  5. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  6. jsp——js事件修改属性样式的两种方法(直接赋值、修改属性)、验证表单符合某要求、阻止表单提交、告诉浏览器不要缓存

    代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...

  7. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  8. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  9. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

随机推荐

  1. python学习笔记-(一)初识python

    1.python的前世今生 想要充分的了解一个人,无外乎首先充分了解他的过去和现在:咱们学习语言也是一样的套路 1.1 python的历史 Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈp ...

  2. HTML5——购物车

    简要代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  3. jsp之jstl标签

    常用jstl标签 一.<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> ...

  4. [TimusACM][1258]程序员撞墙的问题

    (本文是从我的旧博客迁移过来的) 问题地址:http://acm.timus.ru/problem.aspx?space=1&num=1258 前几日在博客园看到这种在线测试的时候,有一种相见 ...

  5. DXGI快速截屏录屏技术

    DXGI快速截屏录屏技术 概述   很多地方都需要用到截屏/录屏技术,比如桌面直播,桌面录制等等.在微软Windows平台,有很多截屏的接口,不过大多数性能并不理想,Windows8以后微软引入了一套 ...

  6. Codeforces899D Shovel Sale(思路)

    http://codeforces.com/problemset/problem/899/D 还是得tag一下,以下代码只有G++ 14 6.4.0能过,其他都过不了不知为什么? 思路:先求出最多的9 ...

  7. angularjs的$http请求方式

    /*$http常用的几个参数 $http服务的设置对象: 1.method 字符串 表示发送的请求类型 get post jsonp等等 2.url 字符串 绝对或者相对的URL,请求的目标 3.pa ...

  8. RabbitMQ系列教程之一:我们从最简单的事情开始!Hello World(转载)

    RabbitMQ系列教程之一:我们从最简单的事情开始!Hello World 一.简介 RabbitMQ是一个消息的代理器,用于接收和发送消息,你可以这样想,他就是一个邮局,当您把需要寄送的邮件投递到 ...

  9. (改进)Python语言实现词频统计

    需求: 1.设计一个词频统计的程序. 2.英语文章中包含的英语标点符号不计入统计. 3.将统计结果按照单词的出现频率由大到小进行排序. 设计: 1.基本功能和用法会在程序中进行提示. 2.原理是利用分 ...

  10. 右值引用和std::move函数(c++11)

    1.对象移动 1)C++11新标准中的一个最主要的特性就是移动而非拷贝对象的能力 2)优势: 在某些情况下,从旧内存拷贝到新内存是不必要的,此时对对象进行移动而非拷贝可以提升性能 有些类如IO类或un ...