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. select * from (select user())a 为什么是查询user()的意思?

    步骤:1.先查询 select user() 这里面的语句,将这里面查询出来的数据作为一个结果集 取名为 a2.然后 再 select * from a 查询a ,将 结果集a 全部查询出来

  2. 【Android布局】在程序中设置android:gravity 和 android:layout_Gravity属性——位置设置偏向

    LinearLayout有两个非常相似的属性: android:gravity与android:layout_gravity. 他们的区别在于: android:gravity 属性是对该view中内 ...

  3. 【Python】help与dir的用法

    当你给dir()提供一个模块名字时,它返回在那个模块中定义的名字的列表.当没有为其提供参数时, 它返回当前模块中定义的名字的列表. 如果您需要快速获取任何的Python函数或语句的信息,那么您可以使用 ...

  4. __block 和__weak 区别及使用

    API Reference对__block变量修饰符有如下几处解释: //A powerful feature of blocks is that they can modify variables ...

  5. Rabbitmq消息队列(二) Hello World! 模拟简单发送接收

    1.简介 RabbitMQ是消息代理:它接受和转发消息.你可以把它当作一个邮局:当你把你要邮寄的邮件放在信箱里时,你可以肯定Postman先生最终会把邮件送到你的收件人那里.在这个比喻中,Rabbit ...

  6. 在iis6里使用没有扩展名的mvc

    这2天mvc第二个预览终于出来了.赶紧拿过来测试.在装了3.5的虚拟主机上运行正常.应该已经可以到能正常使用的阶段了.不过我前面一篇翻译的文章中说到,如果使用的是iis6的话就只能忍气吞声的使用带扩展 ...

  7. 如何高效利用github提升自己

    作为开源代码库以及版本控制系统,Github拥有超过900万开发者用户,是开发者打开程序开源大门的一扇窗口,也是开发者快速提升自己的一个重要途径.本文将从两个方面介绍github的使用方式. 和逛微博 ...

  8. 下载文件,ie文件名称乱码问题

    设置响应编码,将文件名称用java.net.URLEncoder.encode编码,这样就不会乱码了 java.net.URLEncoder.encode response.setCharacterE ...

  9. C++程序设计(第4版)读书笔记_指针、数组与引用

    void * 函数指针和指向类成员的指针不能被赋给void * 字符串字面值常量 #include <iostream> using namespace std; void f() { c ...

  10. ROW模式的SQL无法正常同步的问题总结

    转自:http://blog.chinaunix.net/uid-20639775-id-4664792.html#_Toc29623 ROW模式的SQL无法正常同步的问题总结 一. 问题起因.... ...