文档章节

通过Js来设置页面样式

素人派
 素人派
发布于 2016/12/31 20:47
字数 594
阅读 21
收藏 0
  • 介绍
我们可以在编辑HTML源码的时候将CSS样式写死到.css文件或者HTML元素的style属性中,但又时候可能会需要动态地来修改某个元素的样式。 我这里介绍两种方式:修改HTML元素的style属性、动态加载link节点。如果各位看客还有其他方法的话,不吝赐教,欢迎给点小提示哦。
  • style属性
在使用各种框架之前,必须要知道原生的Js到底是怎么写的。这里最直接的办法就是: document.getElementById('content').style = 'margin-left:0px;position:absolute;'; 上面的代码给id为content的元素添加了两个CSS样式,都是key-value的形式,以分号(;)分割。这样的代码在Firefox浏览器中是没问题的,但可能在IE和Chrome中无效,下面介绍另一种方法: var content = document.getElementById('content'); content.style.marginLeft = '0px'; content.style.position = 'absolute'; 可以看到这种办法要稍微麻烦点,但没关系,如果内容很多的话我们依然是可以使用循环来搞定(谁让我们程序员都是懒人呢)。另外,要注意的是,这里的CSS属性名和直接在.css文件中的写法稍微有点不同,例如:.css文件中的margin-left在这里就需要写成marginLeft,取消中划线(-),用大写字母来代替。
  • link节点
我们知道,在HTML中每个元素都是可以有class属性来设置样式的,这种样式是从.css文件中加载的。如果我们想要修改的效果是这种比较全局性的样式的话,上面的办法可能就不太试用了。解铃还须系铃人嘛,.css文件的问题就让她自己来解决吧。 和js文件一样,除了写死在源代码中静态加载之外还是可以根据实际需要来动态加载的(哈,这有点像Java中的反射或者C语言中神奇的指针吧)。 要想实现这样的效果,当然是需要在HTML中动态添加一个link节点了: var page_div = document.getElementById('page'); var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'test.css'; page_div.appendChild(link); 至于test.css文件的内容,自己随便写喽。
  • 参考
这里有另外一篇文章,介绍如何通过Js来修改页面元素。 http://www.w3school.com.cn/jsref/dom_obj_style.asp

本文转载自:http://surenpi.com/2015/10/30/%e9%80%9a%e8%bf%87js%e6%9d%a5%e8%ae%be%e7%bd%ae%e9%a1%b5%e9%9d%a2%e...

共有 人打赏支持
素人派
粉丝 22
博文 1906
码字总数 9279
作品 6
东城
程序员
私信 提问

暂无文章

基于 DataLakeAnalytics 的数据湖实践

随着软硬件各方面条件的成熟,数据湖(Data Lake)已经越来越受到各大企业的青睐, 与传统的数仓实践不一样的是,数据湖不需要专门的“入仓”的过程,数据在哪里,我们就从哪里读取数据进行分析...

迷你芊宝宝
27分钟前
1
0
ubuntu查看防火墙状态

1.查看防火墙当前状态 sudo ufw status 2.开启防火墙 sudo ufw enable 3.关闭防火墙 sudo ufw disable 4.查看防火墙版本 sudo ufw version 5.默认允许外部访问本机 sudo ufw default all...

Frost729
28分钟前
1
0
Gradle插件使用过程记录

Android中基于Gradle进行编译打包的过程,下面记录一下如何进行Gradle插件开发的过程: 首先在项目中新建的一个名为buildSrc的module,为什么叫这个名字请看官方文档。然后将Java文件夹以及r...

JerryLin123
35分钟前
1
0
RSA 2019安全大会:企业资产管理成行业新风向标,云上安全占优势

美国时间3月4-8日,国际知名信息安全峰会RSA Conference在美国旧金山开幕,云安全及云可以为企业提供更可靠的资产管理方式成为大会热点。 此次峰会共吸引全球700多家机构参展,其中近42%为云...

阿里云云栖社区
36分钟前
2
0
重磅推出TabLayout高级窗口组件

TabLayout是在APICloud现有窗口系统基础上升级而来的高级窗口组件,符合Material Design规范,可通过简单的配置为窗口实现原生的导航栏和TabBar,它将帮助您节省30%以上的重复编码工作量,同...

API_Cloud
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部