vue大坑之获取mint-ui内组件样式

一.原生js获取css样式(实用,解决问题)
必须要提出的是,我们使用 element.style 也可以获取元素的CSS样式声明对象,但是其与 getComputedStyle 方法还是有一些差异的。

首先,element.style 是可读可写的,而 getComputedStyle 为只读。

其次,element.style 只可以获取 style 样式上的属性值,而无法得到所有的 CSS 样式值,什么意思呢?回顾一下 CSS 基础,CSS 样式表的表现有三种方式,

  1. 内嵌样式(inline Style) :是写在 HTML 标签里面的,内嵌样式只对该标签有效。
  2. 内部样式(internal Style Sheet) :是写在 HTML 的 <style> 标签里面的,内部样式只对所在的网页有效。
  3. 外部样式表(External Style Sheet) :如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以 .CSS 为后缀的 CSS 文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个 CSS 文件。
    而 element.style 只能获取被这些样式表定义了的样式,而 getComputedStyle 能获取到所有样式的值(在不同浏览器结果不一样,chrome 中是 264,在 Firefox 中是238),不管是否定义在样式表中,譬如:
 <style>
 #id{
    width : 100px;
    float:left;
 }
 </style>

  var elem = document.getElementById('id');
elem.style.length // 2
window.getComputedStyle(elem, null).length // 264
console.log(window.getComputedStyle(d).getPropertyValue("width")); //100

DOM 中 getComputedStyle 方法可用来获取元素中所有可用的css属性列表, 以数组形式返回 ,并且是只读的。window.getComputedStyle 获取的是所有的样式,如果我们只是要获取单一样式,该怎么做呢。这个时候就要介绍另一个方法 -- getPropertyValue 。如上代码

二. 使用vuejs的ref获取绑定元素
组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据vue的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种[DOM diff],它可以极大提高网页的性能表现。如下代码:

html//
<div style="text-align:center;padding:2px" ref="abc" id="s">
            <div style="height:10px"></div>
 </div>

给div绑定ref='abc'

export default {
    name: 'other',
    data() {
        return {
            list: []
        }
    },
    mounted() {
        console.log(this.$refs.abc.style.Height);
    },

此时打印为空,并没有打印出来仍何东西,但是,如果在id为s的div标签里写上内联样式height,此时就可以获取height的值,外链及其他方式的样式获取不到
三. 用jquery获取元素

<mt-tabbar fixed id="mtabbar" ref="mtabbar" style="font-size:20px">
                <mt-tab-item id="xx">
                    <img slot="icon" src="">xx
                </mt-tab-item>
                <mt-tab-item id="xx">
                    <img slot="icon" src=""> xx
                </mt-tab-item>
</mt-tab-item>

jquery封装其实就是运用了getComputedStyle和getPropertyValue原生方法,所以console.log($('#mtabbar').css("height"));获取到该元素高度,不过vue是数据驱动的,其目的就是减少对dom的操作,而且尽量不要再vue里使用jquery

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,013评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,205评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,370评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,168评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,153评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,954评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,271评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,916评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,382评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,624评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,209评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2 345

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1 92
  • “萨满”二字是通古斯语,有“知道”的含义。在原始部落里,萨满必不可少,他们是部落的医生、巫师、智者、灵魂、精神领袖...
    魔法料理雅清阅读 357评论 0 2
  • 昨天和自己的组员一起吃饭,很开心也很感恩,以前是我为她们着急,希望她们赶快起来牧养带小组,可是她们却不急,我好像再...
    周淑峰阅读 199评论 0 0
  • 平凡生活过有趣, 这是我的小心意。 人人日子都不易, 只要用心就美丽。 花点小钱, 珍爱空闲。 读书作诗, 回到少年。
    黛眉居阅读 235评论 2 3
  • 关键词:动态分配 贡献点 贡献值 股权回购 股权切割 转股时点字数:2314,建议阅读时间:6-8分钟 之前的文章...
    Tonytoni阅读 11,065评论 7 32