基本语法：

引用样式时是在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. pop回到之前的某一个页面
			
    循环遍历 - (void)backHome:(UIButton *)button { self.navigationController.navigationBarHidden = NO; 4 Cas ...
    
			
    2. 
						
  2. 爬虫初窥day3：BeautifulSoup
			
    信息提取 1.通过Tag对象的属性和方法 #!/usr/bin/python # -*- coding: utf- -*- from urllib.request import urlopen fro ...
    
			
    3. 
						
  3. Mockplus3.5.0.1新增标注功能
			
    Mockplus3.5.0.1版本中,新增了标注功能.多种标注模式,智能生成,随时查看.原型设计效率更高. Mockplus的标注功能有以下四种模式: 1.无选中标注 在未选中任何组件时,按住Ctrl ...
    
			
    4. 
						
  4. PSP（3.30——4.5）以及周记录
			
    1.PSP 3.30 12:00 13:00 10 50 Account前端 A Y min 13:00 13:20 0 20 站立会议 A Y min 15:15 17:00 20 85 Accou ...
    
			
    5. 
						
  5. ssh 常用命令
			
    1.复制SSH密钥到目标主机,开启无密码SSH登录 ssh-copy-id user@host 如果还没有密钥,请使用ssh-keygen命令生成. 2.从某主机的80端口开启到本地主机2001端口的 ...
    
			
    6. 
						
  6. PCA图
			
    R语言PCA 1.关键点 综述:主成分分析 因子分析 典型相关分析,三种方法的共同点主要是用来对数据降维处理的从数据中提取某些公共部分,然后对这些公共部分进行分析和处理. #主成分分析 是将多指标化为 ...
    
			
    7. 
						
  7. hdu-1800（字符串hash）
			
    题目链接:传送门 思路: 就是找最多多少个扫帚,每个扫帚上有连续递增的序列,就是找一个最多重复数字的重复次数. 由于是30位,每次用char*类型,然后用hash映射一下,排序找最多就行了. 注意:  ...
    
			
    8. 
						
  8. 【RabbitMQ】三种类型交换器 Fanout,Direct,Topic（转）
			
    出处:https://blog.csdn.net/fxq8866/article/details/62049393 RabbitMQ服务器会根据路由键将消息从交换器路由到队列中,如何处理投递到多个队列 ...
    
			
    9. 
						
  9. redis 的一主二从三哨兵模式
			
    概述 在部署redis 的时候,如果redis宕机,缓存将不可用,redis提供了哨兵模式保证redis实现高可用. 即一台主机两台从机,三台哨兵主机,如果主实例宕机,哨兵将将一台从机升级为主机.实现 ...
    
			
    10. 
						
  10. oracle 数据库io 异常，错误代码17002 解决办法
			
    数据库使用一个月了,突然挂掉:错误代码17002 io异常:read timeout 解决: 1.登陆sql命令窗口 [oracle@hostname ~]$ sqlplus /nolog SQL*P ...
    
			
    11.