day26—JavaScript对CSS样式的获取和修改实践

转行学开发,代码100天——2018-04-11

通过JavaScript获取和修改HTML元素及CSS属性是其一个基本功能。对于CSS样式通常有行内样式,外部样式,内嵌样式之分。

如:

行内样式:

    <div id="box" style="width: 100px;height: 100px;background:#ccc"></div>

外部样式:

<link rel="stylesheet" type="text/css" href="ccss.css">

内嵌样式:

<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>

对于样式的获取也因其写入方式不同而有所区别:

对于行内样式的获取,用  obj.style.属性方式

如下面的一个获取和修改行内样式的案例:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript获取样式的方式</title>
    <script type="text/javascript">
        //css样式获取和修改方法,两个参数时,获取;三个参数时修改
        function css(obj){
            alert(arguments[0]);
            if (arguments.length==2) {
                return arguments[0].style[arguments[1]];
            }else
            {
                arguments[0].style[arguments[1]] = arguments[2];
            }
        }
        //封装获取元素方法
        function $(id){return document.getElementById(id);}
        window.onload =function () {
            var box = $(‘box‘);
            alert(css(box,"width"));//获取
            css(box,"width","200px");//设置属性

        }
    </script>
</head>
<body>
    <div id="box" style="width: 100px;height: 100px;background:#ccc"></div>
</body>
</html>

通过css函数技能获取样式也能修改样式,其前提是基于获取的HTML对象obj

   function css(obj){
            alert(arguments[0]);
            if (arguments.length==2) {
                return arguments[0].style[arguments[1]]; //获取样式
            }else
            {
                arguments[0].style[arguments[1]] = arguments[2]; //修改样式
            }
        }

为了使用方便,提升函数的通用性,可以将该函数进一步优化,增加obj,name,value参数

    //css样式获取和修改方法,两个参数时,获取;三个参数时修改
        function css(obj,name,value){
            // alert(arguments[0]); //arguments[0]=obj
            if (arguments.length==2) {
                return obj.style[name];  //获取样式
            }else
            {
                obj.style[name] = value;  //修改样式
            }
        }

非行间样式:obj.style.属性  方式并不适用与非行间样式

“好东西一般不兼容”

在用currentStyle() 与getComputedStyle() 获取非行间样式时需要考虑兼容性问题,而浏览器的兼容性问题一般都是通过if..else条件语句实现。

currentStyle() 兼容IE6、7、8 
getComputedStyle()不兼容IE6、7、8

原文地址:https://www.cnblogs.com/allencxw/p/8796964.html

时间: 2024-10-08 21:36:30

day26—JavaScript对CSS样式的获取和修改实践的相关文章

使用jquery操作元素的css样式(获取、修改等等)

//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr("class","divClass")设置Id为two的class属性. //2.追加样式 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 //3.移除样式 $("

原生javascript 获得css样式有几种方法?

css 样式分为行内样式和 外部样式: 1.javascript 获得行内样式 : 可以使用  ele.style."属性名称"(如果遇到属性名称带有"-", 需要使用驼峰方法,例如 background-color 改为 backgroundColor); 2.javascript 获得外部样式 ( getComputedStyle 可以获得style 的值也可以获得外部样式表的css) 获得外部样式可以使用浏览器提供的 "window.getCompu

JavaScript对css样式表操作

CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<head></head>之间的样式表 <head> <style> </style> </head> 外联:通过<head>标签中的<link >标签中链接的css样式表 js对内嵌操纵: <p style=&quo

&lt;JavaScript&gt;尺寸类样式的获取

尺寸类样式的获取 offsetHeight HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数.(content+padding+border) 通常,元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度. 对于文档的body对象,它包括代替元素的CSS高度线性总含量高.浮动元素的向下延伸

javascript操作CSS样式表

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <!--meta http-equiv="x

使用原生javascript如何读写css样式?

一说起操作css样式很多人都会想到jQuery的css方法: $(selector).css(name) ,但是有思考过如何使用原生javascript来实现类似的功能么?本文和大家分享的就是使用原生javascript实现css样式相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 大家最熟悉的原生js操作样式的方法非DOM中的Style对象莫属了,但是这个方法只能获取和修改html文档中的内联样式,无法操作非内联样式(内部样式和外部样式表).我通过搜索和整理,总结了使用原生

关于获取、设置css样式封装的函数入门版

1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>CSS样式的获取和设置:简单版</title> 5 <style type="text/css"> 6 #div { 7 width: 100px; 8 height: 100px; 9 background: pink; 10 } 11 </style> 12 <scrip

css样式获取,style,currentStyle,getComputedStyle

对于css样式的获取问题,对于行内样式,我们可以用style来获取,但是对于内嵌和外部样式的话,style就心有余和力不足了.它是获取不到这些样式的 此时就只有currentStyle和getComputedStyle上阵了. currentStyle是只兼容各种IE的,但是不兼容火狐,谷歌的,而getComputeStyle的话是可以兼容火狐,谷歌,和IE9+的.(以下测试均在谷歌和IE下) 对于行内样式: <!DOCTYPE html> <html lang="en&quo

webpack4.0(四) --css样式及图片打包(style-loader,css-loader)

一.CSS样式打包 1. loader简介 由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是js文件(如项目里添加的index.js). 那么其他文件类型该如何进行打包呢?这时我们就要用到webpack中所提供的各种loader,它就是专门用于处理除JS文件之外的其他格式文件的编译.提取.合并.打包等. 其中CSS文件的打包需要用到style-loader和css-loader这两个依赖包,