基本语法：

引用样式时是在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. &和&&的区别是什么
			
    1)&是按位与操作符,a&b是把a和b都转换成二进制数后,然后再进行按位与的运算.&&是逻辑与运算符,a&&b就是当且仅当两个操作数都为true时,其结 ...
    
			
    2. 
						
  2. javase高级技术 - 反射
			
    在说反射之前,必须得先说说java的类加载器,类加载器的定义:将.class文件加载到内在中,并为之生成对应的Class对象. 一般有三种 1 Bootstrap ClassLoader 根类加载器也 ...
    
			
    3. 
						
  3. Windows使用SSH Secure Shell实现免密码登录CentOS
			
    笔记来自:http://blog.csdn.net/jiangshouzhuang/article/details/50683049 1.在Windows上生成密钥找到Secure Shell Cli ...
    
			
    4. 
						
  4. 【NIFI】 Apache NiFI 与 SQL 操作
			
    本里需要基础知识:[NIFI] Apache NiFI 安装及简单的使用 查询SQL 1.拖入一个 Processor:ExecuteSQLRecord(执行sql记录) 2.配置,SETTINGS的 ...
    
			
    5. 
						
  5. 基于Web Service的客户端框架搭建一：C#使用Http Post方式传递Json数据字符串调用Web Service
			
    引言 前段时间一直在做一个ERP系统,随着系统功能的完善,客户端(CS模式)变得越来越臃肿.现在想将业务逻辑层以下部分和界面层分离,使用Web Service来做.由于C#中通过直接添加引用的方来调用 ...
    
			
    6. 
						
  6. word表格如何实现序号自动填充
			
    打开word文档,我们需要在如下表格中的准考证号这一列中输入准考证号,手工输入肯定很慢,且容易出错.   我们先选中需要填充准考证号的表格.   选择功能区域中的“开始”,在“段落”组中点击“编号”按 ...
    
			
    7. 
						
  7. Java：斐波那契数列
			
    斐波那契数列指的是这样一个数列 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,987,1597,2584,4181,6765,10 ...
    
			
    8. 
						
  8. 使用delphi 10.2 开发linux 上的Daemon
			
    delphi 10.2 支持linux, 而且官方只是支持命令行编程,目地就是做linux 服务器端的开发. 既然是做linux服务器端的开发,那么普通的命令行运行程序,然后等待开一个黑窗口的方式就  ...
    
			
    9. 
						
  9. ubuntu安装vmare tools
			
    在vm中安装vm tools, 点击安装 vmware tools cp  VMwareTools-10.0.10-4301679.tar.gz  /home/YOURNAME/    //因为cd  ...
    
			
    10. 
						
  10. Hibernate 的Configuration、sessionFactory和session和transaction对象解释
			
    1.Configuration对象: Configuration conf=new Configuration(); conf.configure(); 1.1 到 src下面找到名称hibernat ...
    
			
    11.