返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Javascript 动态样式控制方法
  • 264
分享到

Javascript 动态样式控制方法

2024-04-02 19:04:59 264人浏览 安东尼
摘要

目录方法一:使用style属性来设置方法二:定义好类选择器的样式方法一:使用style属性来设置 使用style属性来设置 html代码:     <div id="div1"

方法一:使用style属性来设置

使用style属性来设置

html代码:

    <div id="div1">
        div
    </div>

Javascript代码:

var div1 = document.getElementById("div1");
        div1.onclick = function () {
            //修改样式
            div1.style.border = "1px solid red";

            div1.style.width = "200 px";

            div1.style.fontSize = "200px";
        }

方法二:定义好类选择器的样式

定义好类选择器的样式,通过元素的ClassName属性来设置其Class属性值,用的比较多

html代码:

   <div id="div2">
        div2
    </div>

Css代码: 

  <style>
        .d1{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        .d2{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>

javascript代码:

var div2 = document.getElementById("div2");
        div2.onclick = function () {
            div2.className = "d1";
        }

到此这篇关于javascript 动态样式控制方法的文章就介绍到这了,更多相关Javascript 动态样内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Javascript 动态样式控制方法

本文链接: https://www.lsjlt.com/news/141472.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Javascript 动态样式控制方法
    目录方法一:使用style属性来设置方法二:定义好类选择器的样式方法一:使用style属性来设置 使用style属性来设置 html代码:     <div id="div1"...
    99+
    2024-04-02
  • Javascript如何实现动态样式控制方法
    这篇文章主要介绍Javascript如何实现动态样式控制方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!方法一:使用style属性来设置使用style属性来设置html代码:   &n...
    99+
    2023-06-29
  • JavaScript动态添加HTML控件的方法
    今天小编给大家分享一下JavaScript动态添加HTML控件的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下...
    99+
    2024-04-02
  • vue中动态控制btn的disabled属性方式
    目录动态控制btn的disabled属性场景动态改变:disabled的属性值首先然后接着动态控制btn的disabled属性 场景 当ajax请求回来的数据为空时,btn为disa...
    99+
    2024-04-02
  • Vue动态样式方法实例总结
    目录前言Vue动态样式实现方式:style:classv-if/v-else + 复合类名结尾前言 本文主要针对 Vue2.x 来展开vue的动态css样式方法归纳。如果亲爱的读者们...
    99+
    2023-02-07
    Vue动态样式 vue 动态style vue动态样式方法
  • Vue动态样式绑定的方法是什么
    本文小编为大家详细介绍“Vue动态样式绑定的方法是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue动态样式绑定的方法是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。解释操作元素的 class 列表和...
    99+
    2023-07-05
  • android 动态控制状态栏显示和隐藏的方法实例
    方法一:(经试验无效,但网上广为流传,也许是我使用方法不当,有待进一步验证……) android想要应用运行时全屏有一种方法是在activity的onCreat方法中加入如下代...
    99+
    2022-06-06
    方法 状态栏 动态 Android
  • Vue实现动态样式的多种方法汇总
    目录1. 三元运算符判断2. 动态设置class 3. 方法判断 4. 数组绑定5. computed结合es6对象的计算属性名方法1. 三元运算符判断 <text :st...
    99+
    2024-04-02
  • jquery动态修改css样式的方法是什么
    使用jQuery的`css()`方法可以动态修改元素的css样式。语法如下:```javascript$(selector).css...
    99+
    2023-08-08
    jquery css
  • 揭秘 JavaScript 代理模式:掌控动态行为
    ...
    99+
    2024-04-02
  • vue元素样式实现动态改变方法介绍
    目录1 前言2 动态改变样式的方法2.1 操作元素class列表2.2 操作元素内联样式3 小结1 前言   在vue项目中,很多场景要求我们动态改变元素的样式,...
    99+
    2024-04-02
  • JavaScript中怎么动态创建div属性和样式
    JavaScript中怎么动态创建div属性和样式,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1.创建div元素:Javascript代...
    99+
    2024-04-02
  • jq怎么动态添加动态css样式
    小编给大家分享一下jq怎么动态添加动态css样式,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!jq动态添加动态css样式的方法:首先准备jquery库文件,并声明一个class样式;然后准备一个事件加载初始化的方法,并直接...
    99+
    2023-06-09
  • 使用Log4j2代码方式配置实现线程级动态控制
    目录一 需求二 对外暴露的接口三 代码方式配置Log4j2日志对象四 线程级日志对象的设计五 标准日志头六 异常日志的堆栈信息打印七 测试一 需求 最近平台进行升级,要求日志工具从L...
    99+
    2024-04-02
  • JavaScript给CSS加样式的方法
    本篇内容介绍了“JavaScript给CSS加样式的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • 详解react的两种动态改变css样式的方法
    第一种:动态添加class,以点击按钮让文字显示隐藏为demo import React, { Component, Fragment } from 'react'; impor...
    99+
    2024-04-02
  • 微信小程序动态控制tabbar的数量,uniApp动态控制tabbar的数量
    需求分析:         小程序登录进来有2种身份,每种身份看到的页面不一样,而且tabbar的数量也不一样,这个时候就需要用到微信小程序的自定义tabbar, 自定义tabbar和原生tabbar在用户体验上差不多,几乎看不出有什么区别...
    99+
    2023-09-17
    微信小程序 uni-app 小程序
  • Vue之el-select结合v-if动态控制template显示隐藏方式
    目录el-select结合v-if动态控制template显示隐藏Vue动态控制表格列的显示隐藏效果总结el-select结合v-if动态控制template显示隐藏 背景: 根据(...
    99+
    2023-05-15
    Vue el-select Vue v-if Vue template显示隐藏
  • vue如何控制页面样式
    本篇内容介绍了“vue如何控制页面样式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、计算属性计算属性是Vue中的一个特殊属性,它的值是一...
    99+
    2023-07-05
  • JavaScript中实现并发控制的方法
    这篇文章将为大家详细讲解有关JavaScript中实现并发控制的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、并发控制简介在日常开发过程中,你可能会遇到并发控制的场景,比如控制请求并发数。那么在 ...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作