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. RDMA——libibverbs 代码分析（1）

    下载libibverbs最新代码,https://downloads.openfabrics.org/verbs/README.html 为1.2.0版本.后面开始逐步分析libibverbs源码. ...

  2. [root-me](web-client)write up 一个大坑怎么填啊

    root-me web-client writeup 地址:www.root-me.org HTML - disabled buttons 打开网页发现按钮不能按,查看源代码,有 'disabled' ...

  3. [SniperOJ](web)图书管理系统 注入 源码泄露

    0x00 题目概况 题目地址:http://www.sniperoj.cn:10000/ 这是一道注入题,存在git源码泄露,使用githack(freebuf有工具介绍)把源码脱下来,进行审计,然后 ...

  4. CF17E Palisection(manacher/回文树)

    CF17E Palisection(manacher/回文树) Luogu 题解时间 直接正难则反改成求不相交的对数. manacher求出半径之后就可以差分搞出以某个位置为开头/结尾的回文串个数. ...

  5. JavaScript day03 循环

    循环 while循环 循环是重复性做一件事情 没有办法控制每次循环的时间长度 循环会增大程序时间复杂度(不建议无限循环嵌套 一般情况下不会嵌套超过两次) 死循环 是不会停止的循环 会导致电脑内存溢出 ...

  6. 『现学现忘』Docker基础 — 35、实战：自定义CentOS镜像

    目录 1.前提说明 2.编写Dockerfile文件 3.构建镜像 4.运行镜像 5.列出镜像的变更历史 1)目标:自定义镜像wokong_centos. 2)所用到的保留字指令: FROM:基础镜像 ...

  7. 面试官：知道ThreadLocal嘛？谈谈你对它的理解？（基于jdk1.8）

    https://zhuanlan.zhihu.com/p/99150038   ​ 西北工业大学 计算机技术硕士在读 在java的多线程模块中,ThreadLocal是经常被提问到的一个知识点,提问的 ...

  8. 什么是Java序列化，如何实现Java序列化？或者请解释Serializable接口的作用?

    象序列化的目标是将对象保存到磁盘中,或允许在网络中直接传输对象,对象序列化机制允许把内存中的Java对象转换成平台无关的二进制流,从而允许把这种二进制流持久保存在磁盘上,通过网络将这种二进制流传输到另 ...

  9. 什么时候使用session？什么时候使用application?

    application:程序全局变量对象,对每个用户每个页面都有效session:用户全局变量,对于该用户的所有操作过程都有效

  10. spring-boot关于spring全注解IOC

    什么是IOC容器: Spring IoC 容器是一个管理Bean 的容器,在S pring 的定义中,它要求所有的IoC 容器都需要实现接口BeanFactory ,它是一个顶级容器接口 IoC 是一 ...