一、检测浏览器是否支持css

　　CSS 作为(X)HTML 的辅助，可以增强页面的显示效果。但不是每个浏览器都能支持最新的 CSS 能力。CSS 的能力和 DOM 级别密切相关，所以我们有必要检测当前浏览器支持CSS 能力的级别。

　　DOM1 级实现了最基本的文档处理，DOM2 和 DOM3 在这个基础上增加了更多的交互能力，这里我们主要探讨 CSS，DOM2 增加了 CSS 编程访问方式和改变 CSS 样式信息。

　　这种检测方案在 IE 浏览器上不精确，IE6 中，hasFeature()方法只为 HTML 和版本1.0 返回 true，其他所有功能均返回 false。但 IE 浏览器还是支持最常用的 CSS2 模块。

<script type="text/javascript">

    window.onload = function(){

        //检测浏览器是否支持 DOM1 级 CSS 能力或 DOM2 级 CSS 能力

        alert('DOM1 级 CSS 能力：' + document.implementation.hasFeature('CSS', '2.0'));

        alert('DOM2 级 CSS 能力：' + document.implementation.hasFeature('CSS2', '2.0'));

    }

</script>

二、获取和设置行内样式

　　任何 HTML 元素标签都会有一个通用的属性：style。它会返回 CSSStypeDeclaration 对象。下面我们看几个最常见的行内 style 样式的访问方式。

　　

　　1、使用行内style获取行内样式

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box'); //获取 box

        alert(box.style);//[object CSS2Properties]  CSS样式对象

        alert(box.style.color); //获取行内样式中的color属性的值

        alert(box.style.fontSize);//获取行内样式中的font-size属性的值，在这里如果属性有-这种符号有前缀后缀的需要将-去掉，后一个单词首字母大写

        alert(box.style.background);

        alert(box.style.float);　　　　//获取行内样式中的float属性的值，但这种写法非IE不支持，要使用下面的写法

        alert(box.style.styleFloat);　　　　//这种写法IE可以，其他不可以

        alert(box.style.cssFloat);　　　　//获取行内样式中的float属性的值,但这种写法IE6,7,8不支持，要使用下面的写法做兼容

        alert(box.style.cssFloat || box.style.styleFloat);//跨浏览器兼容，谁有值就返回谁

    }

</script>

</head>

<body>

    <div id="box" style="color:#F00;background:#ccc; font-size:20px; float:right;">测试Div</div>

</body>

　　2、使用行内style设置行内样式

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box'); //获取 box

        box.style.color="red";

        box.style.fontSize="30px";

        box.style.background="#ccc";

        box.style.cssFloat = "right";//IE6,7,8没有用

        //做兼容：

        typeof box.style.cssFloat != 'undefined'? box.style.cssFloat='right':box.style.styleFloat='right';

    }

</script>

</head>

<body>

    <div id="box">测试Div</div>

</body>

三、DOM2 级样式规范为 style 定义了一些属性和方法。

　　Firefox、Safari、Opera9+、Chrome 支持这些属性和方法。IE 6,7,8只支持 cssText，而getPropertyCSSValue()方法只有 Safari3+和 Chrome 支持。

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box');     //获取 box

        alert(box.style.cssText);                     //获取 CSS 代码

        alert(box.style.length);                     //获取CSS属性的数量 IE6,7,8不支持

        //box.style.removeProperty('color');         //移除某个 CSS 属性，IE6,7,8 不支持

        box.style.setProperty('color','blue');         //设置某个 CSS 属性，IE6,7,8 不支持

    }

</script>

</head>

<body>

    <div id="box" style="color:#F00; font-size:20px;">测试Div</div>

</body>

　　style 属性仅仅只能获取行内的 CSS 样式，对于另外两种形式内联<style>和链接<link>方式则无法获取到。

JavaScript的DOM_操作行内样式的更多相关文章

  1. JS:操作样式表1：行内样式

    //访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.col ...

  2. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  3. CSS 行内样式 页内样式 外部样式

    行内标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  4. important覆盖行内样式

    优先级,外部样式<内部样式<行内样式,后台富文本编辑器编辑的正文显示在前台时可用!important覆盖其行内样式 今天的问题,font-family:"思源黑体 CN!impo ...

  5. css的三种使用方式:行内样式,内嵌样式,外部引用样式

    三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  6. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  7. 原生js去除行内样式

    概述 今天我用js给dom元素设置样式,碰到了一些问题,记下来供以后开发时参考,相信对其他人也有用. 心得 js加上class: $dom.classList.add('some-class'); j ...

  8. 为何给CheckBox设置了checked属性还是没有勾选，行内样式都显示了checked

    为何给CheckBox设置了checked属性还是没有勾选,行内样式都显示了checked 正常情况下我们设置给CheckBox一个checked属性后一般都会选中 然而我今天在做案例的时候却遇到了类 ...

  9. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

随机推荐

  1. TP2.1 加载扩展配置文件参数

    维护老项目真的恶心!!!!!!!!! TP3.2好像有这样一个配置参数,可以设置有那些扩展配置文件,系统会自动加载. 方法一: 'LOAD_EXT_CONFIG' => 'user,db',// ...

  2. [转]C#中Timer使用及解决重入问题

    本文转自:http://www.cnblogs.com/hdkn235/archive/2014/12/27/4187925.html ★前言 打开久违的Live Writer,又已经好久没写博客了, ...

  3. 基于struts2注解@action的@Result跳转问题——跳转到另一个action

    初学ssh 基于注解的方式简单灵活,但是做一个例子的时候,添加用户AddUser 完成后 想页面跳转到 ListUser 这个action, 然后action 成功后 会跳转到list.jsp 显示 ...

  4. SSIS教程：创建简单的ETL包 -- 5. 添加包部署模型的包配置（Adding Package Configurations for the Package Deployment Model）

    包配置允许您从开发环境的外部设置运行时属性和变量. 配置允许您开发灵活且易于部署和分发的包.Microsoft Integration Services 提供了以下配置类型: XML 配置文件 环境变 ...

  5. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

  6. 使用http维持socket长连接

    项目中有遇到问题如下: 1.旧版的cs服务,因为每个用户和唯一的长连接是在登录后绑定的,并且所有的消息报文均是基于该长连接去发送接收的,所以要求node服务要维持一个长连接,然后根据该用户获取长连接, ...

  7. 四、闭锁之CountDownLatch

    一.简介 闭锁是Java的一种同步工具类.我们在程序运行过程中,某个任务需要等待其它一个到多个的任务全部完成才会执行,这个等待的期间就叫做闭锁. CountDownLatch是闭锁的一种实现,它支持一 ...

  8. MapReduce学习

    参考文章 参考文章2 shuffle的过程分析 Hadoop学习笔记:MapReduce框架详解 谈mapreduce运行机制,可以从很多不同的角度来描述,比如说从mapreduce运行流程来讲解,也 ...

  9. frameset 在 Google Chrome 中无法隐藏左边栏解决方法！

    使用Frameset 框架,发现在IE下, <frameset name="mainDefine" cols="200,10,*" frameborder ...

  10. Line Numbers for RichText Control in C#

    from: http://www.codeproject.com/Articles/38858/Line-Numbers-for-RichText-Control-in-C using Microso ...