1.  element.style       行内样式操作

代码示例 :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <div></div>

    <script>

        // 1. 获取元素

        var div = document.querySelector('div');

        // 2. 注册事件 处理程序

        div.onclick = function() {

            // div.style里面的属性 采取驼峰命名法

            this.style.backgroundColor = 'purple';

            this.style.width = '250px';

        }

    </script>

</body>

</html>

2. element.className    类名样式操作

代码示例 :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: pink;

        }

        .change {

            background-color: purple;

            color: #fff;

            font-size: 25px;

            margin-top: 100px;

        }

    </style>

</head>

<body>

    <div class="first">文本</div>

    <script>

        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用

        var test = document.querySelector('div');

        test.onclick = function() {

            // this.style.backgroundColor = 'purple';

            // this.style.color = '#fff';

            // this.style.fontSize = '25px';

            // this.style.marginTop = '100px';

            // 让我们当前元素的类名改为了 change

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况

            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器

            // this.className = 'change';

            this.className = 'first change';

        }

    </script>

</body>

</html>

js 修改页面样式的两种方式的更多相关文章

  1. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  2. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  3. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...

  4. egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名

    egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...

  5. JSP错误页面处理的两种方式

    JSP错误页面处理的两种方式: 方法1(真能针对单一页面生效,不推荐): 出错页面实例 <%@ page language="java" contentType=" ...

  6. 用js实现九九乘法口诀两种方式

    js实现九九乘法口诀两种方式: 第一种是用户输入一个数弹出所对应的乘法口诀: <script type="text/javascript"> function art( ...

  7. html 指定页面字符集的两种方式

      1.html指定页面字符集的两种方式 方式一: <meta charset="utf-8"> 方式二: <meta http-equiv="Cont ...

  8. 修改ElementUI样式的几种方式

    ElementUI是一款非常强大的前端UI组件库,它默认定义了很多美观的样式,但是我们在实际开发过程中不可避免地遇到需要修改ElementUI默认样式.下面总结了几种修改默认样式的方法. 1. 新建全 ...

  9. JS中访问对象的两种方式区别

    可以使用下面两种方式访问对象的属性和方法 1.对象名.属性名 对象名.方法名() 2.对象名["属性名"] 对象名["方法名"]() var obj = { n ...

随机推荐

  1. Git 、运算符一 JAVA day10

    不知不觉已是第十天学习,学习时时间往往过的很快.废话不多说进入正题: 今天开始学习JAVA中的运算符 一.基本运算符 +,-,*,/.%:加.减.乘.除,余数 下面用IDEA来举例说明 基本运算符 p ...

  2. 09自动售货机综设实验（含按键消抖，led和状态机）

    一设计功能 1.上次状态机的练习 2这次自动售货机综设 (一)对比两次的售货机 上次售货机的关键是画出状态转移图.明确输入分几种,输出是啥,有哪些状态.如下图所示 (二)系统或综合设计的经验: 既然这 ...

  3. ModelSim10.7安装破解教程

    我打算开始学习ZYNQ,所以先安装好工具ModelSim10.7,很无奈的是倒腾了一个上午也没生产license的txt文档和破解成功. 上面是破解失败的截图,下面是生成不了license,点了直接闪 ...

  4. Java基础 （上）

    基础概念与常识 Java 语言有哪些特点? 简单易学: 面向对象(封装,继承,多态): 平台无关性( Java 虚拟机实现平台无关性): 支持多线程( C++ 语言没有内置的多线程机制,因此必须调用操 ...

  5. springboot 定时任务 session报错问题

    一.自定义类 LocalVariable package com.lh.mes.base.thread; import java.util.Optional; public class LocalVa ...

  6. 学习zabbix（一）

    一.zabbix监控简介 server: 通过收集snmp和agent发送的数据,写入数据库(MySQL,ORACLE),再通过 php+apache 在 web 前端展示. agent:主机通过安装 ...

  7. 那是我在夕阳下的code

    布局何如让一个标签上下左右都居中?这有什么难的,给定子标签的宽,再让它的边距上下为0,左右为auto;如下: .child{width:10px;margin:0 auto;}//子标签 它就可以左右 ...

  8. JavaScript & 6小时了解ES6基本语法

    一步一步似爪牙. 前言 学习es6之前我们可能并不知道es6相比es5差距在哪, 但是这并不妨碍我们站在巨人的肩膀上; 程序员就是要乐于尝鲜; 学习es6最终目的是结合es5 一起进行工程项目开发, ...

  9. Vue小说阅读器（仿追书神器）

    一个vue阅读器项目,目前已升级到2.0,阅读器支持横向分页并滑动翻页(没有动画,需要动画的可以自己设置,增加transitionDuration即可) 技术栈 vue全家桶+mint-ui gith ...

  10. idea 启动微服务 设置 run dashboard

    微服务如果很多,启动时如果在run窗口,会不是很方便,所以idea中配置了rundashboard,有时不自动出现时,需要进行配置: 配置操作如下: 我的idea版本2020.2 1.在父工程的.id ...