文档章节

DOM的style对象设置样式

盘盘的灰灰
 盘盘的灰灰
发布于 2016/03/29 09:12
字数 86
阅读 6
收藏 0

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" >
  <title>Setting the style of page elements</title>
  <style>
    span{
     font-size: 16px;
     font-family: arial,helvetica,sans-serif;
     padding: 50px;
    }
  </style>
  <script>
   function toggle(){
    var myElement=document.getElementById("id1");
    if(myElement.style.backgroundColor=='red'){
     myElement.style.backgroundColor='yellow';
     myElement.style.color='black';
    }else{
     myElement.style.backgroundColor='red';
     myElement.style.color='white';
    }
   }
   window.onload=function(){
    document.getElementById("btn1").onclick=toggle;
   }
  </script>
</head>
<body>
  <span id="id1">欢迎来到我的站点</span>
  <input type="button" id="btn1" value="Toggle"></input>
</body>
</html>

© 著作权归作者所有

上一篇: 动画DOM元素
下一篇: 图片切换
盘盘的灰灰
粉丝 0
博文 31
码字总数 24142
作品 0
深圳
私信 提问
【EASYDOM系列教程】之获取内联样式

回顾什么是内联样式 所谓内联样式,就是通过 HTML 页面元素的 style 属性为当前元素定义 CSS 样式。 以下代码示例,就是通过 style 属性定义 CSS 内联样式: 值得注意的是: HTML 页面的结构与...

全栈讲师_金云龙
2017/09/12
0
0
DOM和BOM修改元素属性、内容、样式讲解

DOM和BOM修改元素属性、内容、样式讲解 一、修改元素的内容:3个属性 1、innerHTML:获得、设置元素开始标签和结束标签之间的html原文 何时使用:只要获得html原文内容时 固定套路:2个 (1)删...

时光乱了谁的心的博客
2017/12/14
0
0
简述关于通过js判断dom元素去改变该元素的css属性

简述: 很多场景中,都需要我们需要去通过js去判断DOM元素,按照自己实际的需要去改变DOM的css属性。 例如,弹窗的显示和隐藏、背景图片的更换、导航icon的高亮等等..... 今天就来简单讨论关...

Cc卿
2018/05/29
0
0
JavaScript--DOM基础

JavaScript--DOM基础 一、DOM查找方法 1.document.getElementById() 语法:document.getElementById(“id”) 功能:返回对拥有指定 ID 的第一个对象的引用 返回值:DOM对象 说明:id为DOM元素...

JS_HCX
2018/01/04
0
0
从 Chrome 源码看浏览器如何计算 CSS

作者李银城,授权新前端转载 在《Effective前端6:避免页面卡顿》这篇里面介绍了浏览器渲染页面的过程: 并且《从Chrome源码看浏览器如何构建DOM树》介绍了第一步如何解析Html构建DOM树,这个...

NewFrontendWeekly
06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
3
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
6
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
5
0
Python机器学习之数据探索可视化库yellowbrick

背景介绍 从学sklearn时,除了算法的坎要过,还得学习matplotlib可视化,对我的实践应用而言,可视化更重要一些,然而matplotlib的易用性和美观性确实不敢恭维。陆续使用过plotly、seaborn,...

yeayee
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部