学习使用js创建class样式的方法代码整理

学习使用js创建class样式的方法代码整理

    • 1、直接在JavaScript中添加样式
    • 2、创建一个class并通过JavaScript添加到元素上
    • 3、使用JavaScript动态创建并添加style标签

在JavaScript中创建一个class样式可以通过以下几种方式

1、直接在JavaScript中添加样式

document.getElementById('qipa250').style.color = 'blue';
document.getElementById('qipa250').style.fontSize = '20px';

2、创建一个class并通过JavaScript添加到元素上

// CSS
.qipa250Class {
  color: blue;
  font-size: 20px;
}
 
// JavaScript
document.getElementById('myElement').classList.add('qipa250Class ');

3、使用JavaScript动态创建并添加style标签


<div id="qipa250">奇葩天地网</div>


var style = document.createElement('style');
style.innerHTML = `.qipa250Class {
  color: blue;
  font-size: 20px;
}`;
document.head.appendChild(style);
 
var element = document.getElementById('qipa250');
element.classList.add('qipa250Class ');

以上三种方法都可以在JavaScript中创建class样式,你可以根据实际需求选择合适的方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/596863.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

抖音 通用交易系统 下单 密钥生成

已PHP为例 前提提条件 必须在 linux 系统中 生成 准备工作 接下来打开命令 执行命令即可 openssl genrsa -out private_key.pem 2048 rsa -in private_key.pem -pubout -out public_key.pem exit 会生成 公匙和 私匙 在小程序中 将 生成应用公匙 复制到小程序后台 在执行…

C++ 概览并发

并发 资源管理 资源 程序中符合先获取后释放&#xff08;显式或隐式&#xff09;规律的东西&#xff0c;比如内存、锁、套接字、线程句柄和文件句柄等。RAII&#xff1a; (Resource Acquisition Is Initialization),也称为“资源获取就是初始化”&#xff0c;是C语言的一种管…

C语言-设置控制台信息

Win_API Win_API是Windows应用程序接口&#xff08;Windows Application Programming Interface&#xff09;的缩写&#xff0c;它是一组函数、系统服务和程序接口&#xff0c;允许开发者在微软Windows操作系统上创建应用程序。Win32 API 是Windows API的一个主要部分&#xff…

测试用例执行的结果pass_fail_block_skip

pass fail block skip 测试用例的执行结果通常包括以下几个方面&#xff1a; 1. **测试结果状态**&#xff1a;通常分为“通过”、“失败”、“阻塞”和“跳过”等状态。 - **通过**&#xff1a;测试用例执行完毕&#xff0c;预期结果与实际结果一致。 - **失败**&am…

C++ 多态(一)

一、多态定义 同一种操作作用于不同的对象时&#xff0c;可以产生不同的行为。在面向对象编程中&#xff0c;多态性是指通过继承和重写实现的&#xff0c;同一个方法在不同的子类中可以表现出不同的行为。多态性可以提高代码的灵活性和可扩展性&#xff0c;使得程序更易于维护…

Golang中实现调用Windows API向指定目标发送ARP请求

简介 Go库中很多实现的arp都是支持osx/linux/bsd之类的&#xff0c; 但几乎没有支持windows的&#xff0c; 也试了一些方式&#xff0c; 目前还是选用调用windows的API&#xff0c; 记录一下这一次windows的API的调用经验。 实现 代码 package main/* #cgo CFLAGS: -I. #cgo …

Altium Designer——检查原理图库正确性并生成报告

一、方法&#xff1a; 1.打开原理图库&#xff1a; 2.点击菜单栏的报告选项&#xff1a; 3.选择器件规则检查&#xff1a; 根据需求勾选&#xff0c;一般都是全部勾选&#xff1a; 二、问题&#xff1a; 1.缺少封装会导致什么问题&#xff1a; 1.首先&#xff1a; 封装是…

网络相关笔记

IPv4地址 IPv4地址通常以“点分十进制”形式书写&#xff0c;即四个0-255之间的十进制数&#xff0c;各数之间用英文句点&#xff08;.&#xff09;分隔&#xff0c;例如&#xff1a;192.0.2.1。总共32位的地址空间可以表示大约42亿个不同的地址。 IPv4地址结构包括&#xff…

Django开发实战之登录用户鉴权登录界面实现

Django自带的鉴权系统非常的安全&#xff0c;大家可以放心使用&#xff0c;那么如何使用呢&#xff1f; 1、首先需要检查settings文件种的INSTALLED_APPS&#xff0c;有没有这两部分内容&#xff1a; 2、检查中间件&#xff0c;比如这两个中间件&#xff0c;一个是用于登录&a…

io (fscanf fprintf)

20 #include <sys/un.h>21 typedef struct stu22 {23 char name[16];24 int age;25 double score;26 }stu;27 int main(int argc, const char *argv[])28 {29 /* 有如下结构体30 31 申请该结构体数组&#xff0c;容量为5&#xff0c;初始化5个学生的信息32 …

【高校科研前沿】中国科学院地理资源所钟帅副研究员研究组博士生朱屹东为一作在Top期刊发文:从潜力到利用:探索西藏风能资源开发的技术路径优化布局

01 文章简介 论文名称&#xff1a;From potential to utilization: Exploring the optimal layout with the technical path of wind resource development in Tibet&#xff08;从潜力到利用:探索西藏风能资源开发的技术路径优化布局&#xff09; 文章发表期刊&#xff1a;《…

Wireshark明文抓取

目录 原理 配置 1、配置环境变量 2、Wireshark配置 原理 SSLKEYLOGFILE是一个用于记录SSL/TLS会话中使用的密钥的文件。它主要用于调试和分析SSL/TLS协议。当启用了SSLKEYLOGFILE配置&#xff0c;系统会将所有SSL/TLS会话中使用的密钥记录到指定的文件中。这些密钥可以用来…

景源畅信数字:抖音怎么挂橱窗商品?

抖音作为一款短视频分享平台&#xff0c;近年来逐渐融入了电商功能&#xff0c;其中“橱窗”就是商家或个人展示和销售商品的一个重要工具。如何在抖音上挂橱窗商品&#xff0c;成为了众多商家关注的焦点。 一、确保账号资质&#xff1a;在抖音上挂橱窗商品前&#xff0c;需要确…

重写muduo之EPollPoller

1、EPollPoller.h EPollPoller的主要实现&#xff1a;作为poller的派生类&#xff0c;把基类给派生类保留的这些纯虚函数的接口实现出来。 override表示在派生类里面&#xff0c;这些方法是覆盖方法。必须由编译器来保证在基类里面一定有这些函数的接口的声明。在派生类要重写…

标准IO学习

思维导图&#xff1a; 有如下结构体 struct Student{ char name[16]; int age; double math_score; double chinese_score; double english_score; double physics_score; double chemistry_score; double bio_score; }; 申请该结构体数组&#xff0c;容量为5&#xff0c;初始…

(数据分析方法)长期趋势分析

目录 一、定义 二、目的 三、方法 1、移动平均法 (1)、简单移动平均法 (2)、加权移动平均法 (3)、指数平滑法 2、最小二乘法 3、线性回归 1、数据预处理 2、观察数据分布建立假设模型 3、定义损失函数 4、批量梯度下降 5、优化 4、LSTM 时序分析 5、特征工程 一…

智能家居1 -- 实现语音模块

项目整体框架: 监听线程4&#xff1a; 1. 语音监听线程:用于监听语音指令&#xff0c; 当有语音指令过来后&#xff0c; 通过消息队列的方式给消息处理线程发送指令 2. 网络监听线程&#xff1a;用于监听网络指令&#xff0c;当有网络指令过来后&#xff0c; 通过消息队列的方…

X 推出 Stories 功能,由 Grok AI 生成新闻摘要

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

OCC笔记:图形可视化的实现方式

注&#xff1a;文中参看的occ的源码版本为7.4.0 1、实现思路概览 整体架构 主要有3大块&#xff1a;AIS&#xff08;Application Interactive Services &#xff0c;直译为&#xff1a;应用程序交互服务&#xff09;、Graphics&#xff08;图形&#xff09;、Geometry & T…

磐石云最版本使用教程

磐石云外呼系统是一款集成了呼叫平台、电话线路和话术系统的软件&#xff0c;旨在提高企业的电话营销效率。以下是磐石云外呼系统的基本操作步骤&#xff1a; 安装和配置&#xff1a; 首先需要在Linux操作系统上安装磐石云外呼系统&#xff0c;通常需要至少4核CPU、8GB内存以及…
最新文章