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. Java中对文件的处理01-递归删除

    package com.ricoh.rapp.ezcx.admintoolweb.util; import java.io.BufferedInputStream; import java.io.Bu ...

  2. 西门子S7-1200PLC不让下载一直报“模块具有激活的测试和调试功能，防止下载到设备”解决方法

    错误如图 这是因为PLC被强制了,导致下载会报这类错误.取消强制就可以下载. 或者将cpu重置为出厂设置,也能再次下载. 参考:https://www.ad.siemens.com.cn/servic ...

  3. JVM的垃圾回收算法有哪些

    常用的垃圾回收算法有如下四种:标记-清除.复制.标记-整理和分代收集. 标记-清除算法从算法的名称上可以看出,这个算法分为两部分,标记和清除.首先标记出所有需要被回收的对象,然后在标记完成后统一回收掉 ...

  4. Ls 命令执行什么功能？可以带哪些参数，有什么区别？

    ls 执行的功能:列出指定目录中的目录,以及文件 哪些参数以及区别:a 所有文件 l 详细信息,包括大小字节数,可读可写可执行的权限等

  5. Redis 的同步机制了解么？

    Redis 可以使用主从同步,从从同步.第一次同步时,主节点做一次 bgsave, 并同时将后续修改操作记录到内存 buffer,待完成后将 rdb 文件全量同步到复制 节点,复制节点接受完成后将 r ...

  6. 学习openstack（七）

    相关资料: https://www.cnblogs.com/shhnwangjian/category/942049.html https://www.cnblogs.com/goodcook/cat ...

  7. 学习GlusterFS（四）

    基于 GlusterFS 实现 Docker 集群的分布式存储 以 Docker 为代表的容器技术在云计算领域正扮演着越来越重要的角色,甚至一度被认为是虚拟化技术的替代品.企业级的容器应用常常需要将重 ...

  8. 学习Kvm（六）

    五,管理虚拟存储 5.1 虚拟磁盘概述 5.1.1 虚拟化项目中存储的注意事项 [x] 存储的性能几乎总是虚拟化的瓶颈 [x] 通过多个硬盘驱动以分布磁盘I/O来实现存储解决方案 [x] 考虑部署集中 ...

  9. java后台解决上传图片翻转90的问题，有demo，经过测试可用

    1.需要加入 依赖 metadata-extractor.jar 依赖如下 <dependencies> <!-- Extracts Exif, IPTC, XMP, ICC and ...

  10. MTK平台电路设计01

    一.资料 获取途径MTK官网.一牛网 二.