JS获取元素属性

<style>
            *{
                box-sizing: border-box;
            }
            html, body {
                margin: 0px;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .main{
                width: 600px;
                height: 300px;
                margin: 0 auto;
                background: #999;
            }
            #p1{
                padding: 10px 20px;
            }

        </style>
<div class="main" id=main>
            东方红 的事发后 沙发上好厉害多个从V型从一瓶酒发送到发送到
            <p id=p1>sdfldsnfdsnldfsn fnsdfsdlknfsdflndslfsdn</p>
        </div>
<script>
            /**
             * JS获取 dom样式的几种情况
             * 一:获取元素的行内样式
             * 二:获取计算后的样式
             * 三:获取<link>和<style>标签写入的样式
             * 四、获取元素的实际大小
                    1. clientWidth和clientHeight
                        这组属性可以获取元素可视区的大小,
                        可以得到元素内容及内边距所占据的空间大小。
                        返回了元素大小,但没有单位,默认单位是px,如果你强行设置了单位,
                        比如100em之类,它还是会返回px的大小。(CSS获取的话,是照着你设置的样式获取)。
                        对于元素的实际大小,clientWidth和clientHeight理解方式如下:
                    a. 增加边框,无变化;
                    b. 增加外边距,无变化;
                    c. 增加滚动条,最终值等于原本大小减去滚动条的大小;
                    d. 增加内边距,最终值等于原本大小加上内边距的大小;
                    ##注意:当box-sizing属性值是border-box的时候上述abcd不成立
             *
            */
            //1 定义获取dom的函数
            function getDom(str){
                return document.querySelector(str);
            }
            //2 、定义获取
            function getStyle(dom){
                var style=null;
                window.getComputedStyle?style=window.getComputedStyle(dom):style=dom.currentStyle;
                return style;
            }
            var dom1=getDom(‘#main‘);
            console.log(dom1.clientWidth);// 得到的是没带px的数字
            var domstyle=getStyle(dom1);// 字符创的宽度带px 和上面的clientWidth实质上是一样的
            console.log(domstyle.width);

            //p 的宽度
            var dom2=getDom(‘#p1‘);
            console.log(dom2.clientWidth);
            console.log(getStyle(dom2).width);
        </script>
时间: 2024-11-10 01:02:52

JS获取元素属性的相关文章

js获取元素样式包括非行内样式

var obj=document.getElementById("id"): 由于js新版本的发放,越来越多的人喜欢用原生js而非jquery对dom元素进行操作,那么如果通过js获取dom元素的样式呢,很多人都知道用obj.style这种方式,但是,这种方式只能获取dom行内样式,一旦,我们定义class,然后再css文件里写时就会获取不到,下面我主要介绍获取行内样式和获取非行内样式两种获取方法. 1,获取行内样式. <div style="width:200&quo

js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

js中元素属性值的获取

一.样式表的三种方式 1.内嵌样式(inline style):是写在tag标签当中的,用style=“”来表示,只对当前标签生效: 2.内部样式(inner style sheet):是写在HTML中的,一般写在head标签中,对所在的网页有效 3.外部样式表(Extend style sheet):写在单独文件,需要用link标签单独引入,可对多个网页生效 二.获取style样式属性 1.在js中,通过document.getElementById("id").style.xxx就

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

原生js获取元素的class属性(获取class的所有元素)以及改变或添加calssName

今天在工作中,用到了设置className,因此查阅了一下资料,总结一下. 一.如何用原生js获取class属性 1 <div class = "dom'> 2 </div> 元素JS实现方法: 1 function $class(domclass) 2 { 3 var odiv = document.getElementsByTagName("*"); 4 var aResult = []; //定义一个空数组,用来存放与目标className相同的

各种情况上JS获取元素宽高

各种情况下JS获取元素宽高 为了叙述简单,这里仅拿width示例. 情景一,元素style属性设置了width/height <div style="width:996px">test<div><script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width);</script>默认分类 如上,使用el.style.width即可. 如果没有

Js获取元素样式值(getComputedStyle&amp;currentStyle)兼容性解决方案

因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用getComputedStyle,以及currentStyle. IE下获取元素的实际属性值使用currentStyle属性,getComputedStyle同currentStyle作用相同,但是适用于FF.opera.safari.chrome.但用这种方法在IE7,IE8,IE9获取元素属性值

js获取元素样式方法

? 1 2 3 4 5 6 7 8 function getStyle(ojb,attr){       if(obj.currentStyle){             return obj.currentStyle[attr];       }         else{            return getComputedStyle(obj,false)[attr];        } } js获取元素样式方法,布布扣,bubuko.com

js获取元素宽高

只说ie8+的浏览器的方法. 在转vue之前,一直使用jquery来获取元素的高度,最近转vue,发现了一个问题.使用vue的时候,部分操作需要在mounted这个生命周期里面去做,官网对mounted的解释是: 如果不在vm.$nextTick里面做操作的时候,是很有可能获取不到组件内部元素的宽高的.刚开始的时候,我没有仔细看官网,所以在mounted里面是直接获取不到子孙元素的宽高的. 后来,看了iview的一个组件的源码,看到了getComputedStyle方法获取宽高,对getComp