精华内容
下载资源
问答
  • javascript操作css属性

    2021-01-19 19:39:23
    代码如下:var getstyle = function(elementID,attribute){ obj = document.getElementById(elementID);...还有一种可以获取写在html中的style属性的 代码如下:document.getElementById(“elementId”).s
  • 本文实例讲述了js操作css属性实现div层展开关闭效果的方法。分享给大家供大家参考。具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象...
  • 代码如下:<...<head runat=”server”> <title></title> <style type=”text/css”> .day { background-color:White;...script language=”javascript” type=”text/jav
  • js操作css属性

    千次阅读 2012-02-20 14:31:07
    获取css样式表的属性: 1)ie下获取对应标签css样式表属性值 document.getElementById('id').currentStyle.... 2)Firefox下 window.getComputedStyle...使用js操作css属性的写法:和css中的写法不同: 1、对
      
    

    获取css样式表的属性:

    1)ie下获取对应标签css样式表属性值

    document.getElementById('id').currentStyle.属性名字;

    2)Firefox下

    window.getComputedStyle(document.getElementById('id').,null).属性名字;

     

    使用js操作css属性的写法:和css中的写法不同:

    1、对于没有中划线的css属性一般直接使用style.属性名即可。

    如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。

    2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。

    如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等。

    这个规律我想大多数的前端开发者也都熟知。对在css中有一个特殊的属性其js使用方法确比较特殊。

    因为 float 是javascript的保留字,那怎么在js中书写样式表中的 float 呢?

    我们不能直接使用obj.style.float来使用,这样操作是无效的。

    其正确的使用方法是为:IE用obj.style.styleFloat,其他浏览器Mozilla(gecko),ff等用obj.style.cssFloat。

    例子:

    <div οnclick="alert(this.style.float);this.style.float='left';alert(this.style.float);">测试1</div>

    <div οnclick="alert(this.style.float);if(this.style.cssFloat){this.style.cssFloat='left';}else{this.style.styleFloat='left';}alert(this.style.float);">测试2</div>

    javascript中css的float特殊写法

    展开全文
  • 使用js操作css属性的写法是有一定的规律的: 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。 2、对于含有中划线的...
  • js更改css属性

    千次阅读 2019-09-05 10:19:12
    1.div.style.backgroundColor=‘rbg(0,0,0)’ 2.setAttribute()只能更改内联样式和通过js编写的样式,改不了文档中的样式表 HTML中引入CSS样式的方式...下面就简单的介绍下利用JS对内联样式进行操作: 脚本化C...

    1.div.style.backgroundColor=‘rbg(0,0,0)’
    2.setAttribute()只能更改内联样式和通过js编写的样式,改不了文档中的样式表

    HTML中引入CSS样式的方式有三种:
    1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:

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

    2.在Html头部用包起来,在这里面编写样式:

       <style type="text/css">
        *{
        padding: 0;margin: 0
        }
        </style>
    

    3.在标签里面直接编写行内样式。

    <div style="color: #333"><div>
    

    下面就简单的介绍下利用JS对内联样式进行操作:
    脚本化CSS最直接的方法就是更改单独的文档元素的style的属性值,类似大多数的HTML的属性,style也是元素对象的属性,其可以在JS中对其进行操作。由于style具有特殊性,通常style中的属性不只有一个,因而style的值不单单只是一个字符串,而是一个CSSStyleDeclaration对象。通过对该对象的操作可以利用JS更改元素的样式。利用JS操作CSS样式需要注意以下几点:
    (1)通常通过HTML的属性和利用<style>标签定义的样式属性的面子中会包含有一个或者多个连字符如:background-color,但是在JS中两字符是减号,像前面那样书写会报错的。因而在利用JS对属性进行操作时首先将连字符去掉,同时需要将原来紧连着连字符的后的字符转换为大写。这样CSS属性border-width就转换为了:borderWidth。JS中通过如下的方法对CSS样式属性进行访问:e.style.borderWidth=“2px”。另外CSS属性中如果使用了JS中的保留字,则需要在上述的基础上加上CSS,如CSS中的float属性,利用CSSStyleDeclaration对象的cssFloat属性来进行设置。
    (2)CSS样式属性值在CSSStyleDeclaration对象中使用时需要利用字符串形式。同时所有的定位属性(如:width,height,top,left等)都需要加上单位px。这样再利用JS 对其进行运算时需先对字符串进行处理(可以利用字符串对象的方法split)。
    3)JS中获取属性值和给属性赋值的几种方式:
    a、直接利用CSSStyleDeclaration对象进行操作
    b、getAttribute()和setAttribute()分别对获取属性值和给某属性赋值。
    但是通过以上两种方式对CS样式的属性进行操作时,只能获取已经通过JS代码进行设置过的值或者通过HTML元素显示设置了想要的内联样式的值(即在HTML标签中通过属性style进行设置了的属性值)。也就是说文档可能包含一个样式表以设置div的宽度均为300px,但是通过JS读取该属性时将会得到一个空的字符串,除非在JS中已经有一个style属性覆盖了样式列表中的设置。

    c、利用window对象的方法getComputedStyle()获取计算后的样式,该方法是可以获取上面不能获得到的属性值得,但是通过该方法获取到的属性是只读的,同时都是绝对值(如width用百分比表示的会计算转换为具体的数值,颜色会转换成rgba),而且该方法不计算复合属性,不能获取符合属性的值。
    d、通过获取元素对象后利用element.css({width:50px; height:50px;})的方式也可以为元素对像添加样式。

    展开全文
  • 我就废话不多说了,大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> <h5>{{ msg }} ... msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
  • <!... <... <head> ...meta charset="utf-8" />...meta name="viewport" content="width=device-width, initial-scale=1">...style type="text/css"> :root { --bg: white; } .

    前端页面一键切换主题色

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title></title>
    		<style type="text/css">
    			:root {
    				--bg: white;
    			}
    
    			body {
    				background-color: var(--bg);
    			}
    		</style>
    	</head>
    	<body>
    		<button type="button" id="red"></button>
    		<button type="button" id="blue"></button>
    		<button type="button" id="green">绿</button>
    
    
    		<script type="text/javascript">
    			["red", "blue", "green"].forEach(value => {
    				const btn = document.getElementById(`${value}`);
    				btn.addEventListener("click", () => {
    					document.body.style.setProperty("--bg", value);
    				});
    			});
    		</script>
    	</body>
    </html>
    
    展开全文
  • js获取css属性

    万次阅读 2018-03-21 16:40:59
    因为之前用惯了jq来获取和设置css属性,然后在做demo不使用jq的情况下,竟然在这一点上碰到了问题,然后就自个搜了搜为什么,在查看了很多文档和博客之后才终于搞明白了。 &lt;style&gt; .box{ width:200...

    因为之前用惯了jq来获取和设置css属性,然后在做demo不使用jq的情况下,竟然在这一点上碰到了问题,然后就自个搜了搜为什么,在查看了很多文档和博客之后才终于搞明白了。

    <style>
    .box{
        width:200px;
        height:200px;
        border:1px solid red;
        text-align: center;
    }
    </style>
    <div class="box" style="line-height:150px">
       居中
    </div>
    jquery方法

    我们在用jq获取id为box的css属性的时候是最简单的

    //jquery方法
    const jq_width = $('.box').css('width');
    const jq_lineHeight = $('.box').css('line-height');
    console.log(jq_width,jq_lineHeight);//200px 150px

    这种方式应该是最简洁明了的吧。

    然后我们再用js原生方法去获取

    // 原生style.css方法
    const box = document.querySelector('.box');
    const js_width = box.style.width;
    const js_lineHeight = box.style.lineHeight;
    console.log(js_width,js_lineHeight);//   150px
    

    在这里我们会发现style.css方法只能获取到写在标签上的属性 style = "line-height:150px" 不能获取写在<style>``</style>中的css属性

    然后在网上查了很多资料才知道下面这个东西:

    window.getComputedStyle

    使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式
    window.getComputedStyle(当前要操作的元素对象,当前元素的伪类[一般我们不用伪类写null])

    const js_style = window.getComputedStyle(box,null);
    console.log(js_style);//所有样式
    const js_lineHeightStyle = window.getComputedStyle(box,null).lineHeight;
    console.log(js_lineHeightStyle);//150px
    
    // 在ie6~8下不兼容,因为window下没有getComputedStyle这个属性
    //在ie6~8下可以使用currentStyle来获取所有经过浏览器计算过的样式
    
    const js_currentStyle = box.currentStyle;
    console.log(js_currentStyle);//火狐和谷歌为Undefined,IE返回CSS对象
    

    这里写两个简单的获取css属性值的方法(基于原生)

    //第一版
    function getCss(element, attr){
        if(element.currentStyle){
            return element.currentStyle[attr];
        }else{
            return window.getComputedStyle(element,null)[attr];
        }
    }
    //推荐第二版
    //这个是直接获取值
    function getCss(curEle,attr){  
        var val = null,reg = null;  
        if("getComputedStyle" in window){  
            val = window.getComputedStyle(curEle,null)[attr];  
        } else {   //ie6~8不支持上面属性  
            //不兼容  
            if(attr === "opacity"){  
                val = curEle.currentStyle["filter"];   //'alpha(opacity=12,345)'  
                reg = /^alphaopacity=(\d+(?:\.\d+)?)opacity=(\d+(?:\.\d+)?)$/i;  
                val = reg.test(val)?reg.exec(val)[1]/100:1;  
            } else {  
                val = curEle.currentStyle[attr];  
            }  
        }  
        reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i;  
        return reg.test(val)?parseFloat(val):val;   
    }
    console.log(getCss(box,'width'));//200

    好了,用惯了jquery会有思维惯性,所以应该多学习

    展开全文
  • js操作获取dom元素的样式属性值 obj.style: 只能获取行内属性,而无法获取定义在<style type="text/css">里面的属性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
  • 我们想要移除html元素的某个css属性时,将属性赋值为空有时不能达到我们想要的效果
  • 主要介绍了JS实现css hover操作的方法,涉及javascript事件响应及页面元素css属性动态操作相关技巧,需要的朋友可以参考下
  • 使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改; 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为’指令预期...
  • 如何使用JavaScript删除CSS属性

    千次阅读 2020-07-06 14:58:39
    In this article, we'll see how we can remove a CSS property from a certain element using JavaScript? We can remove only those properties that we assign ourselves and the pre-default ones cannot be rem...
  • 使用js操作css属性的写法

    千次阅读 2008-08-24 11:23:00
    使用js操作css属性的写法:和css中的写法不同: 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。 2、对于含有中划线的...
  • 主要介绍了小程序中使用css var变量,使js可以动态设置css样式属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 一、使用js操作css属性的写法 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position 2、对于含有中划线的css属性,将每个中划线...
  • 使用js操作css属性的写法是有一定的规律的: 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。 2、对于含有中划线的css...
  • 经常会用到js来获取元素的CSS样式,由于方法众多,在下面的文章中为大家详细整理下
  • JS——操作CSS样式

    2019-11-09 21:17:38
    页面往往是动态变化的,我们经常需要在脚本里对元素的样式进行操作,刚学习js的时候大家都知道通过style属性设置css样式相关的属性,但有时候也想先获取样式,结果发现通过style取到的值是空,这就需要我们对这些...
  • 以前我们有需要用js或jquery的一些方法hasClass、addClass、removeClass,在一个元素的class属性上添加或者删除某几个类,达到某种样式变化的需求,但还是稍微麻烦了一些。 h5新增的classList可以让我们更方便的元素...
  • js设置css自定义变量Introduction 介绍 The basics of using variables 使用变量的基础 Create variables inside any element 在任何元素内创建变量 Variables scope 变量范围 Interacting with a CSS Variable ...
  • JavaScript如何操作css

    2021-01-18 16:40:41
    原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了div盒子,并且覆盖了css原本的属性内容。 需求目标:由 100 像素的粉色背景色的div盒子变成了 300像素的橘黄色效果的...
  • 用原生js操作css样式方法总结

    千次阅读 2018-07-17 11:39:45
    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档...
  • JS中获取CSS样式的方法 1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得。。注意在CSS中单词之间用 - 连接,在JS中要用驼峰命名 设置行内样式 <style> #header{ ...
  • 微信小程序js添加css属性

    万次阅读 2018-06-08 16:58:22
    // 自定义page对象CSS样式对象 pageBackgroundColor:'#5cb85c' }, onLoad: function () {}, // 改变背景颜色 changeColor: function() { var bgColor = this.data.pageBackgroundColor == 'red' ? '#5cb85c' ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 225,834
精华内容 90,333
关键字:

js操作css属性