app封装css本地,css封装

这是设置css样式的

// css样式封装

setStyle(box,{

width:"100px",

height:"100px",

backgroundColor:"red",

fontSize:"30px",

lineHeight:"100px"

})

var box = document.getElementsByClassName("box")[0];

function setStyle(el, obj) {

for (var x in obj) {

el.style[x] = toString.call(obj[x]) == "[object Number]"? obj[x]+"px":obj[x];

}

setStyle(box, {

width: "100px",

height: "100px",

backgroundColor: "red",

fontSize: "30px",

lineHeight: "100px"

});

注意：这样只能拿到行内设置的样式

.box {

height: 100px;

}

这是box

var box = document.getElementsByClassName("box")[0];

console.log(box.style.width); //100px

console.log(box.style.height); //空

但是在实际中，我们不可能将样式写在行内，都是通过css设置的。

怎样将行内设置的和css设置的样式都拿到。

谷歌和IE各自有各自的方法：

ie的所有版本中获取当前css属性值：box.getCurrentStyle.height

ie11、10、9、谷歌和其他的浏览器：getComputedStyle(el,null).width

所以ie11、10、9两种方法都可以

Document

.box {

height: 100px;

}

这是box

var box = document.getElementsByClassName("box")[0];

console.log(box.style.width); //100px

// 这样只能拿到行内设置的样式

console.log(box.style.height); //空

console.log(box.currentStyle.height,box.currentStyle.width);//100px 100px

// getComputedStyle(el,null).width

// el是要获取的元素第二个参数：是否获取他的伪元素

console.log(getComputedStyle(box,null).width)//100px

注意

对于颜色，在IE中是守规矩的red，但是在谷歌中是rgb表示的

app封装css本地,css封装相关推荐

[转载] CSS模块化【封装-继承-多态】
第一次听到"CSS模块化"这个词是在WebReBuild的第四届"重构人生"年会上,当时我还想,"哈,CSS也有模块化,我没听错吧?"事实上 ...
vue-ant design示例大全——按钮本地css/js资源
vue-ant design示例大全--本地css/js资源示例资源来自官网:https://www.antdv.com/components/button-cn 在 Ant Design Vue ...
Clank – 快速构建移动 APP 原型的 HTML/CSS 框架
Clank 是一个自由和开放源码的 HTML/CSS 框架,可以帮助你轻松创建本地手机或平板电脑应用程序的原型.它着重于提供一致的用户界面,不会刻意去模仿一个特定的 OS .该框架是基于组件的,这样我 ...
vue-ant design示例大全——icon与分隔符本地css/js资源
vue-ant design示例大全--a-icon与分隔符本地css/js资源目录 vue-ant design示例大全--a-icon与分隔符本地css/js资源 a-icon使用品牌图标简 ...
php 网站打包app,利用cordova将网站封装成app
本来在上半年就实现了网站封装成app的,但一直没时间写这篇文章,现在就说下吧首先安装cordova环境当安装好了,将网站的wap静态页面放进www目录,进行编译即可本篇文章主要说明一下封装的坑 ...
Android 本地css引用
/** 全局web样式* 以前看不懂,现在仔细,耐心的看看,全懂了,认真的看一遍都懂了*** */// 链接样式文件,代码块高亮的处理public final static String linkCs ...
【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）...
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
android 加载条封装,Android基于JsBridge封装的高效带加载进度的WebView
图片发自简书App 概述从去年4月项目就一直用起了JsBridge,前面也针对jsBridge使用姿势介绍过一篇入门篇,<Android JsBridge实战打造专属你的Hybrid APP ...

app封装css本地,css封装

app封装css本地,css封装相关推荐

最新文章

热门文章