用JS改变的元素CSS样式,css里display :none 隐藏 block 显示

时间:2022-03-01 09:14:14

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. &period;Net Html如何上传图片到一般应用程序

    用html实现图片上传 后台采用.net其中在这里要借用一个js插件 在这里我会写一个图片上传的一个小Demo,有不全的地方多多包容,和提议, 我把已经写好的demo已经上传到百度云 在这里可以下载 ...

  2. 应用服务器Glassfish任意文件读取漏洞

    catalogue . 前言和技术背景 . Glassfish安装配置 . 漏洞利用 . 漏洞缓解(修复) 1. 前言和技术背景 0x1: GlassFish是什么 GlassFish 是用于构建 J ...

  3. serialize-and-deserialize-bst

    https://leetcode.com/problems/serialize-and-deserialize-bst/ 1. 用到Java Queue接口, // LinkedList实现了Queu ...

  4. BestCoder Round &num;71 &lpar;div&period;2&rpar; (hdu 5620 菲波那切数列变形)

    KK's Steel Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  5. 第一章 JavaScript概述

    JavaScript诞生于1995年.它当时的目的是为了验证表单输入的验证.因为在JavaScript 问世之前,表单的验证都是通过服务器端验证.而当时都是电话拨号上网的年代,服务器验证数据是一件非常 ...

  6. js基础1

    一.JavaScript 不同于Java 有三部分组成 核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) 二.var 是定义数据前加的前缀   三.弹出 alert( ) ...

  7. fineuploader 上传jquery 控件

    fineuploader 昨天用的一个jquery插件. 可参考这篇文章以前写的 file-uploader  跟 这个跟里面介绍的2个jquery 插件相比.觉得更强大写..版本号都3.9 了….. ...

  8. Unity3D 之 console面板的停靠

    是否苦于不知如何停靠console, 是否后悔将它拉出来, 是否在纠结为何没办法拉回去. 将console或其他面板停靠的方法有两种: 1.Window -> Layouts -> Def ...

  9. python demjson

    这个是第三方的json库 首先安装 http://deron.meranda.us/python/demjson/ demjson-2.2.4.tar.gz #tar -xzf demjson-2.2 ...

  10. python安装与初始

    第一天学习中了解到python是高级语言,和java.PHP性质相同,而c语言.汇编属于低级语言,而高级语言与低级语言的区别,很重要的一点在于内存的处理上,低级语言在调用内存时需要自己编程来控制程序内 ...