CSS样式的引用有3种方式:style引用、class引用、id引用,所以js改变元素的样式我们也分3种来说。

1.js改变由style方式引用的样式:
方法一:document.divs.style.cssText="border:1px solid #000000;color:#FF0000";
方法二:document.divs.setAttribute("style","border:1px solid #000000;color:#FF0000");

其中,divs是要改变样式元素的name。

2.js改变由class方式引用的样式:
方法一:document.divs.className='divs1';
方法二:document.divs.setAttribute("class","divs1");

其中,divs是要改变样式元素的name。

3.js改变由id方式引用的样式:
方法二:document.divs.setAttribute("id","divs1");

其中,divs是要改变样式元素的name。

例子:

function expand(el)
{
childobj = document.getElementById("child" + el);

if (childobj.style.display == 'none')
{
childobj.style.display = 'block';
}
else
{
childobj.style.display = 'none';
}
return;
}

用JS改变的元素CSS样式,css里display :none 隐藏 block 显示的更多相关文章

  1. Ajax编程中,经常要能动态的改变界面元素的样式

    在Ajax编程中,经常要能动态的改变界面元素的样式,可以通过对象的style属性来改变,比如要改变背景色为红色,可以这样写:element.style.backgroundColor=”#ff0000 ...

  2. js改变HTML元素的值

    js改变HTML元素的值(常用,备忘) <!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h ...

  3. 判断display为隐藏还是显示及获取css

    <html lang="en"> <head> <title>判断display为隐藏还是显示及获取css</title> < ...

  4. CSS样式----css样式表和选择器(图文详解)

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  5. CSS样式----CSS的继承性和层叠性(图文详解)

    CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...

  6. CSS样式----CSS样式表的继承性和层叠性(图文详解)

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

  7. CSS样式----CSS属性:字体属性和文本属性(图文详解)

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  8. (知识点)JS中获取元素的样式

    首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...

  9. js兼容获取元素的样式

    js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...

随机推荐

  1. Python——在Unicode和普通字符串之间转换

    1.1. 问题 Problem You need to deal with data that doesn't fit in the ASCII character set. 你需要处理不适合用ASC ...

  2. activiti designer下载地址

    http://www.activiti.org/designer/update/ http://www.activiti.org/designer/archived/       这个地址貌似不能用了 ...

  3. linux入门基础——linux网络配置

    linux网络配置 以太网连接 在linux中,以太网接口被命名为:eth0.eth1等.0.1代表网卡编号 通过lspci命令能够查看网卡硬件信息(假设是usb网卡,则须要使用lsusb命令) 命令 ...

  4. Android Volley框架的几种post提交请求方式

    首先简单描述一下Google的Android开发团队在2013年推出的一个网络通信框架Volley.它的设计目标是进行数据量不大,但通信频繁的网络操作,而对于大数据量的网络操作,比如下载文件等,Vol ...

  5. vue 记一次编译没反应、无进度、没有任何报错的提示,但后台却TM一直消耗内存的BUG:

    控制台一直提示“building for production...”,而且spinner停止了动画! 由于没有任何的提示.况且项目的代码.结构.设计完全未知模糊的情况下,我只能按照unix的理念“使 ...

  6. mysql数据库初始化(启动mysql时候报很多错误,初始化)

    ./mysql_install_db --defaults-file=/etc/my.cnf --user=mysql --basedir=/usr/local/mysql --datadir=/us ...

  7. 10710 - Chinese Shuffle(数论+完美洗牌)

    UVA 10710 - Chinese Shuffle 题目链接 题意:给定n张牌,完美洗牌n - 1次,问是否会变回原来的序列 思路:完美洗牌: 如果有a1a2a3...anb1b2b3...bn的 ...

  8. c语言编写51单片机中断程序,执行过程是怎样的?

    Q:c语言编写51单片机中断程序,执行过程是怎样的? 例如程序:#include<reg52.h>  void main(void)  {   EA=1;      //开放总中断   E ...

  9. iOS-NSMutableParagraphStyle段落风格

    apple API: NS_CLASS_AVAILABLE(10_0, 6_0) @interface NSMutableParagraphStyle : NSParagraphStyle @prop ...

  10. MapReduce-MulitipleOutputs实现自己定义输出到多个文件夹

    输入源数据例子: Source1-0001 Source2-0002 Source1-0003 Source2-0004 Source1-0005 Source2-0006 Source3-0007 ...