基本语法:

引用样式时是在head中,用link,另外需要<div>才能显示

修改样式:按下按钮后,引用的样式部分,颜色变为蓝色

如图下图是更改了样式中hello的颜色

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="div" class="div">hello</div>
<button onclick="demo()">按钮1</button>
<button onclick="demo1()">按钮2</button>
<script>
function demo(){
document.getElementById("div").style.backgroundColor="blue"; }
function demo1(){ document.getElementById("div").style.color="yellow"
}
</script>
</body>
</html> 运行结果:

按下“按钮1”


按下“按钮2”

												

第三天:DOM操作css的更多相关文章

  1. JavaScript(三)——DOM操作一

    一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): op ...

  2. webform(九)——JQuery基础(选择器、事件、DOM操作)

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  3. JS基础速成(三)- DOM(文件对象模型)

    .t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.DOM树的基本结构 DOM节点分为三大类:元素节点(标签节点),属性节 ...

  4. Webform——JQuery基础(选择器、事件、DOM操作)

    一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选择:用空格隔开 代码用法展示:   ...

  5. JQuery基础(选择器、事件、DOM操作)

    一.选择器 1.基本选择器 ①id选择器       ②class选择器       ③标签名选择 ④并列选择          ⑤后代选择 代码用法展示: <title></tit ...

  6. DOM与CSS样式表

    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...

  7. js函数 DOM操作

    回学校了两天请了两天假,数组和方法的内容周末一定补上! 今天介绍一下JavaScript函数 Function 一.基础内容 1.定义 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. f ...

  8. 基础DOM和CSS操作(三)

    CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 wid ...

  9. jQuery基础DOM和CSS操作

    $('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...

随机推荐

  1. 差异表达分析之FDR

    差异表达分析之FDR 随着测序成本的不断降低,转录组测序分析已逐渐成为一种很常用的分析手段.但对于转录组分析当中的一些概念,很多人还不是很清楚.今天,小编就来谈谈在转录组分析中,经常会遇到的一个概念F ...

  2. SQL Server 2008数据库连接错误

    以Windows身份连接SQL Server 2008数据库时,连接不上,出现如下报错画面: 解决办法:打开services窗口,找到名字类似于SQL Server (xxx)的服务,启动服务. 注: ...

  3. Linux下文件的三种时间标记(atime ctime mtime)

    在windows下,一个文件有:创建时间.修改时间.访问时间. 在Linux下,一个文件有:状态改动时间.修改时间.访问时间. 1)查看文件(或文件夹)的三种时间标记 (stat 命令) Access ...

  4. sqli-labs:23/25-28,绕waf

    sqli23: and|or型报错 ' or extractvalue(1,concat(0x7e,database())) or '1'='1 union型嵌套select ' union sele ...

  5. openssl编译安装-各种蛋疼

    arm平台  ubuntu Linux xxxxxx 3.0.62 #2 PREEMPT Tue Apr 2 20:14:12 CST 2013 armv7l armv7l armv7l GNU/Li ...

  6. DockerDesktop简单安装和使用

    一.在windows10下,安装DockerDesktop: 1.检查windows版本为企业版或专业版,并开启Hyper-v系统设置:电脑的控制面板->程序->启用或关闭Windows功 ...

  7. mybatis学习五 log4j

    1.  log4j(log for java)由 apache 推出的开源免费日志处理的类库.2. 为什么需要日志: 2.1 在项目中编写 System.out.println();输出到控制台,当项 ...

  8. 2016-2017-2 20155312 实验三敏捷开发与XP实践实验报告

    1.研究code菜单 Move Line/statement Down/Up:将某行.表达式向下.向上移动一行 suround with:用 try-catch,for,if等包裹语句 comment ...

  9. HQL和SQL查询

     转自http://blog.csdn.net/aaa1117a8w5s6d/article/details/7757097 HQL和SQL的区别 标签: sqlhibernatejavasessio ...

  10. 【转】使用PHP导入和导出CSV文件

    项目开发中,很多时候要将外部CSV文件导入到数据库中或者将数据导出为CSV文件,那么具体该如何实现呢?本文将使用PHP并结合mysql,实现了CSV格式数据的导入和导出功能.我们先准备mysql数据表 ...