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. 说说UI自动化中的PO模式

    PO模式,全称PageObject模式,即页面对象模式.将页面定位与业务操作分离. po模式有以下几个优点: 1.易读性好 2.扩展性高 3.复用性强 4.维护性好 5.代码冗余率低 了解了po模式及 ...

  2. python中字符串与列表之间的相互转换

    1.字符串>列表:split() a = 'my first python' b = a.split(" ") print(b)输出: 2.列表>字符串:join() ...

  3. 74CMS 3.0 CSRF漏洞

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1．双击启动桌面Seay源代码审计系统软件 2．因为74CMS3.0源代码编辑使用GBK编 ...

  4. [xnuca](web)xblog

    session会话机制介绍如下 http是无状态协议.服务器靠cookie和session来记住用户.$_SESSION 和 $_GET等一样,是超全局变量. 后台脚本里面会写: session() ...

  5. 重定向（Redirect）和请求转发（Forward）

    一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下: request.getRequestDispatcher("new.jsp").forward(reques ...

  6. 浅谈systemd原理和应用

    多不说,直接上代码(可谓配置): [Unit] Description=demo app After=network-is-online.target [Service] Type=Simple Ex ...

  7. manjaro下使用scrcpy安卓设备投屏

    scrcpy 安卓版本要大于等于 5.0 安装scrcpy及安卓工具包 yay -S scrcpy-git android-tools 打开手机 开发者模式->USB调试,将手机通过数据线连接电 ...

  8. Java 中的同步集合与并发集合有什么区别？

    同步集合与并发集合都为多线程和并发提供了合适的线程安全的集合,不过并发 集合的可扩展性更高.在 Java1.5 之前程序员们只有同步集合来用且在多线程并发 的时候会导致争用,阻碍了系统的扩展性.Jav ...

  9. Java容器基础概况

    一.什么是Java容器 书写程序时,我们常常需要对大量的对象引用进行管理.为了实现有效的归类管理,我们常常将同类的引用放置在同一个数据容器中.Java容器类是java提供的工具包,包含了常用的数据结构 ...

  10. 云计算：Ubuntu下Vue+Springboot前后端分离项目部署（多节点）

    一.机器准备 首先准备三台机器: 我是一台WINDOWS系统主机,在WINDOWS里的 VMware 中安装两台Ubuntu系统虚拟机 如果你的虚拟机只有 CentOS,可以参考这篇文章:https: ...