首页 > 其他分享 >样式操作

样式操作

时间:2024-01-15 17:23:55浏览次数:29  
标签:样式 元素 className 操作 类名 属性

  1. 通过className属性对元素的类名进行操作

  2. 通过HTML5新增的classList属性对元素的类名进行操作。

  3. 通过Style属性设置元素的行内样式。

  4. 通过getComputedStyle方法获取元素的计算后样式。

  5. 通过offset系列,scroll系列,client系列属性来操作元素的组合样式。

ClassName操作

https://csi.chinasoftinc.com/was-139935-b36381303673020fcdfaf60cb7f36058-self.jpg?random=2014858511

说明:通过ClassName操作元素的类名是最简单的方式,但是如果仅仅想增加或者删除某一个具体的类名的时候,不是特别方便。

ClassList属性

https://csi.chinasoftinc.com/was-139936-96b182a254569312938a785659bca207-self.jpg?random=1736124072

说明:使用classList是代替element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法,使用className操作时会覆盖原来的类名。

Style属性

https://csi.chinasoftinc.com/was-139937-cdbc1a13fee0dcd632ef6f88c5134e0d-self.jpg?random=1820316840

说明:style属性是元素的行内样式,在css的层叠性中具有最高的优先级。

元素计算后样式

https://csi.chinasoftinc.com/was-139938-9bfdf2897d3584c4393b93b9080350f2-self.jpg?random=1154710143https://csi.chinasoftinc.com/was-139939-7443486f354bf2eee246724994fb8ff5-self.jpg?random=1019579058

说明:通过多种途径给一个元素设置样式,由于CSS的层叠性因素,优先级低的样式会被层叠最终只有优先级高的生效,可以通过上图右图查看。

标签:样式,元素,className,操作,类名,属性
From: https://www.cnblogs.com/jeor/p/17965854

相关文章

  • SpringBoot中整合ElasticSearch实现增删改查等操作
    场景SpringBoot中整合ElasticSearch快速入门以及踩坑记录:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/135599698在上面进行集成的基础上,实现对ES数据的增删改查等操作。注:博客:https://blog.csdn.net/badao_liumang_qizhi实现1、ElastciSearch的对象映射h......
  • python使用OpenPyXl库对Excel进行操作
    python使用OpenPyXl库对Excel进行操作参考:知乎文章/OpenPyXL教程/博客园目录python使用OpenPyXl库对Excel进行操作1.基本概念2.判断文件是否存在3.创建和打开Excel文件3.1.创建Excel文件3.2.打开已有的Excel文件4.储存数据5.sheet操作6.cell操作1.基本概念在Open......
  • SparkSQL 操作Hive In Java
    本文的前提条件:SparkSQLinJava1.增加POM依赖<dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><version>8.0.33</version></dependenc......
  • SparkSQL 操作Hive
    Spark中本身内置了Hive,但一般用于测试,生产环境中需要连接外置的Hive1.将Hive的配置文件hive-site.xml拷贝到Spark的配置目录下cp/usr/hive/apache-hive-3.1.3-bin/conf/hive-site.xml/usr/spark/spark-3.5.0-bin-hadoop3/conf2.将MysqlJDBC驱动放置在Spark的jars目录下1.......
  • 操作滚动条小结:scrollIntoView/animate等方法的来龙去脉
    操作滚动条可以通过锚点跳转,JS操作滚动条,与scrollIntoView等方法。对此,我来考古一下。锚点跳转滚动滚动条网页中的锚点跳转是HTML早期功能之一,锚点(anchor)跳转是1991年发布的HTML标准的一部分,这是超文本链接的基本特性。锚点跳转通过使用<a>标签的href属性来创建指向页面内部某......
  • LCD 硬件操作原理
    1、LCD显示原理  FrameBuffer即显存   SMT32与液晶控制芯片通过8080接口通讯,而液晶控制芯片包含显存、LCD控制器、LCD屏幕,液晶控制芯片常见有RA8875、ILI9341等芯片 嵌入式Linux则使用TFTRGB接口,内存和LCD控制器集成在Soc里面,外部接一个LCD屏幕。......
  • 复选框的操作,看这一篇就够啦~~
    平常在工作中对于复选框的操作算频繁的了。尽管在网上已经有很多这方面的文章了,但是感觉总结的不够详细。下面是本人对于操作复选框进行的一些总结。下面的方法大多是基于jquery的,所以要记得引用jquery哦~~用原生js的地方做了说明,大家各取所需吧。HMTL代码如下:1<!DOCTYPEh......
  • C#与C++代码的互操作方式
    title:C#与C++代码的互操作方式date:2024-01-10categories:编程tags:-C#-.NET-C++-COM-平台调用大致介绍在写C#程序时经常有与本地代码(C/C++)代码交互的需求。微软提供了许多种方式供我们选择,最常用的有以下三种(A->B指A可以引用B):flowchartLRA--P/Invoke......
  • C语言文件操作
    写文件-输出相应字符/字符串到相应的文本文件#define_CRT_SECURE_NO_WARNINGS1#include<stdio.h>#include<errno.h>#include<string.h>intmain()//输入字符到TEST.txt中{ FILE*pfwrite=fopen("TEST.txt","w"); if(pfwrite==NULL)//打开失败情况 { prin......
  • C#创建及读取DAT文件操作
    *.DAT从后缀名上也能理解其中的含义即:data文件,数据文件;这个文件有的可以用记事本工具打开,但是加密后就不一定了。很多程序都创建dat文件来保存设定。创建一个只有自己才能解析得dat文件,并且可以读取和写入,写一个类,它可以创建一个只有使用这个类才能解析得dat文件。同时读取或写入......