基本语法：

引用样式时是在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. 
						
  2. webform（九）——JQuery基础（选择器、事件、DOM操作）
		
    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...
    
		
    3. 
						
  3. JS基础速成（三）-  DOM（文件对象模型）
		
    .t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.DOM树的基本结构 DOM节点分为三大类:元素节点(标签节点),属性节 ...
    
		
    4. 
						
  4. Webform——JQuery基础（选择器、事件、DOM操作）
		
    一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选择:用空格隔开 代码用法展示:    ...
    
		
    5. 
						
  5. JQuery基础（选择器、事件、DOM操作）
		
    一.选择器 1.基本选择器 ①id选择器       ②class选择器       ③标签名选择 ④并列选择          ⑤后代选择 代码用法展示: <title></tit ...
    
		
    6. 
						
  6. DOM与CSS样式表
		
    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...
    
		
    7. 
						
  7. js函数 DOM操作
		
    回学校了两天请了两天假,数组和方法的内容周末一定补上! 今天介绍一下JavaScript函数 Function 一.基础内容 1.定义 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. f ...
    
		
    8. 
						
  8. 基础DOM和CSS操作(三)
		
    CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 wid ...
    
		
    9. 
						
  9. jQuery基础DOM和CSS操作
		
    $('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. LaTeX数学公式大全
			
    原写于我的洛谷博客(传送门),现搬到这个博客上. 建议去洛谷博客上看,因为两边的编辑器在有些功能上不能通用,所以之后若有删改或新增内容只在洛谷博客上弄,这边就懒得改了. 原本是针对洛谷的编辑器,不过懒 ...
    
			
    2. 
						
  2. MyBatis Generator中文文档
			
    MyBatis Generator中文文档 MyBatis Generator中文文档地址: http://mbg.cndocs.tk/ 该中文文档由于尽可能和原文内容一致,所以有些地方如果不熟悉,看 ...
    
			
    3. 
						
  3. 如何利用Photoshop进行快速切图
			
    在UI设计中我们常常使用Ai来进行矢量图的绘制,然后导入Ps中进行设计.排版和导出. 在以前的版本中,切图一直是个很麻烦的事情,要么依托于脚本,要么手动一张张导出,很不方便,这种窘况在Photosho ...
    
			
    4. 
						
  4. 室内设计类网站Web原型制作分享——Dinzd
			
    Dinzd是一家德国室内设计网站,网站内涵盖全球设计精品资讯以及优秀案列.网站布局简单直观,内容丰富. 此原型模板所用到的交互动作有结合弹出面板做下拉菜单效果,鼠标按下文字按钮跳转页面,按钮hover ...
    
			
    5. 
						
  5. base64编码是什么
			
    首先明确一点base64 是一种编码格式.就想utf-8一样,能在电脑上表示所有字符,或者换句话说通过编码能让电脑理解你想要标识的字符(因为电脑只知道0和1 ) 就像ascII 中 0100 0001
    
			
    6. 
						
  6. The Django Book第七章(表单)
			
    从Request对象中获取数据 在views函数里．我们常常写到 from django.http import HttpResponse def hello(request): return Htt ...
    
			
    7. 
						
  7. Tomcat架构解析(一)-----Tomcat总体架构
			
    Tomcat是非常常用的应用服务器,了解Tomcat的总体架构以及实现细节,对于理解整个java web也是有非常大的帮助. 一.Server   1.最简单的服务器结构 最简单的服务器结构如图所示: ...
    
			
    8. 
						
  8. 安装kafka 集群 步骤
			
    1.下载 http://mirror.bit.edu.cn/apache/kafka/2.1.0/kafka_2.11-2.1.0.tgz 2.解压  tar -zxvf kafka_2.11-2.1 ...
    
			
    9. 
						
  9. 6-具体学习git--分支冲突，rebase|| stash 临时修改
			
    rebase很危险. https://morvanzhou.github.io/tutorials/others/git/
    
			
    10. 
						
  10. 安装SourceTree遇到的一个个坑
			
    之前在公司的电脑上满心欢喜的安装了下,很顺利就成功了,回来在自己电脑上安装,结果坑不能停,以此来纪念下吧! 下载完成后,进行安装: 这里我是申请了个账户,选第一个user an existing ac ...
    
			
    11.