基本语法:

引用样式时是在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. javascript 高级程序设计 二

    这里我们直接进入主题: 在JS刚刚开始的时候,必须面临一个问题,那就是如何使的JS的加载和执行不会影响web核心语言HTML的展示效果,和HTML和谐共存. 在这个背景下<script>标 ...

  2. ubuntu下firefox打开mht文件

    1.安装firefox插件:UnMHT 插件地址:http://www.unmht.org/unmht/en_index.html 2.用firefox打开mht文件

  3. 201621123008 《Java程序设计》第八周学习总结

    1. 本周学习总结 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 源代码: public boolean contains(Object o ...

  4. ui设计教程分享:关于Logo设计要素

      1. 视觉上”一语双关 我最喜欢的一些Logo在视觉设计上”一语双关”,将两张图片.两张意象巧妙结合,合二为一. WinePlace 的Logo就是一个绝佳的案例 这个Logo看起来像图钉,暗喻着 ...

  5. vue中常用的指令

    1. v-textv-text主要用来更新textContent,可以等同于JS的text属性. <span v-text="msg"></span> 2. ...

  6. python网络socket编程

    一.服务端 #!/usr/bin/python # -*- coding: UTF-8 -*- import socket import sys from thread import * HOST = ...

  7. 跟我学Spring Boot(二)Hello World

    1.打开DemoApplication添加如下代码 package com.example; import org.springframework.boot.SpringApplication; im ...

  8. Select isnull(,)

    类似于 select isnull(...,1) from table 这样的 isnull函数防止查询结果为空,防止接下来需要这个值时可能造成空指针异常

  9. Mysql #1406 Data too long 错误

    Mysql #1406 Data too long 错误 http://blog.sina.com.cn/s/blog_68004f680100kgfh.html B. Mysql配置文件:   “在 ...

  10. 有关PHP 10条有用的建议--转(柒捌玖零)

    1.使用ip2long() 和long2ip()函数来把IP地址转化成整型存储到数据库里. 这种方法把存储空间降到了接近四分之一(char(15)的15个字节对整形的4个字节),计算一个特定的地址是不 ...