js怎样控制CSS

HTML网页中可以通过js来控制标签的属性,那么应该怎样做呢?今天我就来给大家分析分析一下具体的思路。

操作方法

  • 01

    这里我就以div标签为例进行说明,首先,我们在网页中书写三个div标签。

  • 02

    然后通过CSS来设置div的属性,这里我就使用width和height来设置div的宽高,都是40像素,然后设置div的背景颜色为红色。 然后使用margin-top来让div拉开一定的间距,margin-left让div距离浏览器左边100像素,哈哈,这样做只是为了大家更清楚看到控制效果而已,作用不是很大。

  • 03

    然后来看看效果,可以看到三个div的颜色样式等。

  • 04

    可以看到整个网页中有三个div,接着我们使用document.getElementsByTagName来获取到div这个标签。 document.getElementsByTagName返回的是一个数组,里面包含了三个div,然后我们通过数组下标来控制标签的属性,比如我要控制第一个div标签的宽度,就可以用a[0].style.width="150px";而剩下的两个分别是控制颜色和高度。

  • 05

    接着我们预览一下控制后的效果,可以看到第一个div宽度改变了,而第二个div颜色变成蓝色,最后一个div高度也变化了。

  • 06

    当然也可以通过id的方式来控制修改标签的属性,比如我们要控制第二个标签,就在第二个div里面添加id=””,引号里面就是id的名称,可以自己取一个。 这里我就把id名称设置为“two”。

  • 07

    然后我们再重新在script里面使用document.getElementById来获取第二个div的id,这样,就可以通过id来控制标签属性了。

  • 08

    再来看看使用document.getElementById后的效果。

(0)

相关推荐

  • JS如何控制DIV的显示和隐藏

    我们进行网页开发的时候,经常需要运用JS去控制某个div的显示或者隐藏.下面小编通过实例教大家如何实现这种功能. 操作方法 01 打开Sublime Text编辑器,新建一个HTML文档,注意一定要设 ...

  • 在JavaScript中引用引用JS文件或css文件

    操作方法 01 JavaScript:head=document.getElementsByTagName('head').item(0);CreateLink("css/test.css& ...

  • YUI Compressor使用配置方法 JS/CSS压缩工具

    YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发。 YUI Compressor下载地址:http://www./softs/25860.html 使用方法 ...

  • HTTP调试工具 fiddler图文使用教程详细介绍(附软件下载)

    Fiddler可以帮您记录,调试Microsoft Internet Explorer与Web应用程序的交互,找到Web程序运行性能的瓶颈,还有如查看向Web服务器发送cookies的内容,下载内容的 ...

  • HTTP调试工具 fiddler图文使用教程

    Fiddler可以帮您记录,调试Microsoft Internet Explorer与Web应用程序的交互,找到Web程序运行性能的瓶颈,还有如查看向Web服务器发送cookies的内容,下载内容的 ...

  • 2016年二月设计圈实用干货大合集

    新年假期结束,咱们这就要开工啦,先给大家推一发干货助助兴.这次的干货合集延续以往的传统,精致的线性图标,Material Design 设计素材,手势图标,APP展示套件,各种设计模板,视觉稿,插画, ...

  • sublime text2小技巧.帮助您写代码是越写越快

    SublimeText2 支持但不限于 C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX ...

  • iis日志无法生成解决办法

    通常虚拟主机都是支持iis日志下载的,独立主机和VPS更会支持,可是不巧的是,今天在设置内网主机时,不小心产生了一个状况:IIS日志无法生成。最后发现,是过度关注安全,将“记录访问”选项取消。下面说说 ...

  • 阿里云服务器配置与性能优化

    阿里云我问过很多站长都说非常的不错了,不管是网速还是从性能都比其它主机要好,但阿里云就是贵那么一点了,下面小编来给各位介绍阿里云服务器配置与性能优化 更换阿里云服务器有一阵了,相对于我以前的虚拟主机不 ...