web前端之css变量的妙用、通过JavaScrip改变css文件中的属性值、querySelector、setProperty

MENU

  • 效果图
  • html
  • JavaScrip
  • style
  • querySelector
  • setProperty


效果图

cssVariable1


cssVariable2


html

<div id="idBox" class="p_r w_680 h_160 b_1s_red"><div id="idItem" class="p_a l_0 t_30 w_100 h_100 bc_rgba_255_00_05 radius_50_"></div>
</div>

JavaScrip

function init() {const idBox = document.querySelector('#idBox');const w = idBox.clientWidth;idBox.style.setProperty('--w', w + 'px');
}init();

style

#idItem {animation: move 10s linear infinite;
}@keyframes move {50% {transform: translateX(calc(var(--w) - 100%));}
}

transform: translateX(calc(var(--w) - 100%));
css形变属性,其中--w是一个变量,并且这个值是我们不知道的;100%表示元素本身,也就是圆的宽。


querySelector

MDN

文档对象模型Document引用的querySelector方法返回文档中与指定选择器或选择器组匹配的第一个Element对象。如果找不到匹配项,则返回null


w3school

querySelector方法返回与CSS选择器匹配的第一个元素。
如需返回所有匹配项(不仅是第一个匹配项),请改用querySelectorAll
如果选择器无效,则querySelectorquerySelectorAll都会抛出SYNTAX_ERR异常。


setProperty

W3school

setProperty()方法在CSS声明块中设置新的CSS属性,或修改现有的属性。


MDN

CSSStyleDeclaration.setProperty()方法接口为一个声明了CSS样式的对象设置一个新的值。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS Developer——鸿蒙【构建第一个JS应用(FA模型)】

创建JS工程 JS工程目录结构 构建第一个页面 构建第二个页面 实现页面间的跳转 使用真机运行应用 说明 为确保运行效果&#xff0c;本文以使用DevEco Studio 3.1 Release版本为例&#xff0c;点击此处获取下载链接。 创建JS工程 若首次打开DevEco Studio&#xff0c;请点击…

排序算法-选择/堆排序(C语言)

1基本思想&#xff1a; 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的 数据元素排完 。 2 直接选择排序: 在元素集合 array[i]--array[n-1] 中选择关键码最大 ( 小 ) 的数据元素…

《PySpark大数据分析实战》图书上线啦

《PySpark大数据分析实战》图书上线啦 《PySpark大数据分析实战》图书上线啦特殊的日子关于创作关于数据关于Spark关于PySpark关于图书/专栏 《PySpark大数据分析实战》图书上线啦 特殊的日子 不知不觉一转眼入驻CSDN已经满一年了&#xff0c;这真是一个充满意义的特殊的日子&…

《python每天一小段》--12 数据可视化《1》

欢迎阅读《Python每天一小段》系列&#xff01;在本篇中&#xff0c;将使用Python Matplotlib实现数据可视化的简单图形。 文章目录 一、概念&#xff08;1&#xff09;安装matplotlib&#xff08;2&#xff09;数据可视化实现步骤 二、绘制简单的折线图&#xff08;1&#xff…

mysql中NULL值

mysql中NULL值表示“没有值”&#xff0c;它跟空字符串""是不同的 例如&#xff0c;执行下面两个插入记录的语句&#xff1a; insert into test_table (description) values (null); insert into test_table (description) values ();执行以后&#xff0c;查看表的…

Navicat 技术指引 | 连接 GaussDB 分布式

Navicat Premium&#xff08;16.3.3 Windows 版或以上&#xff09;正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结…

基于人工智能技术的《量化投资AI系统》集群架构设计与实现

乔总&#xff1a;您好&#xff01; 前些日子你我的共同朋友潘总&#xff0c;推荐您来聊聊将ChatGPT应用于量化投资的合作。在与您及您的团队进行了超过2个多小时的沟通后&#xff0c;恕我直言&#xff0c;不客气地说&#xff0c;感觉您的团队对人工智能技术几乎是空白。为了让…

使用linux CentOS本地部署SQL Server数据库

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、Cpolar杂谈 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 安装sql server二. 局域网测试连接三. 安装cpolar内网穿透四. 将sqlserver映射…

kubectl获取ConfigMap导出YAML时如何忽略某些字段

前言&#xff1a; 当我们在使用Kubernetes时&#xff0c;常常需要通过kubectl命令行工具来管理资源。有时我们也想将某个资源的配置导出为YAML文件&#xff0c;这样做有助于版本控制和资源的迁移。然而&#xff0c;默认情况下&#xff0c;使用kubectl get命令导出资源配置会包…

JVM 分析GC日志

GC日志参数 -verbose:gc 输出gc日志信息&#xff0c;默认输出到标准输出 -XX:PrintGC 输出GC日志。类似&#xff1a;-verbose:gc -XX:PrintGCDetails 在发生垃圾回收时打印内存回收详细的日志&#xff0c;并在进程退出时输出当前内存各区域分配情况 -XX:PrintGCTimeStam…

基于SpringBoot+uniapp微信小程序校园点餐平台详细设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

vue3 setup语法糖 多条件搜索(带时间范围)

目录 前言&#xff1a; setup介绍&#xff1a; setup用法&#xff1a; 介绍&#xff1a; 前言&#xff1a; 不管哪个后台管理中都会用到对条件搜索带有时间范围的也不少见接下来就跟着我步入vue的多条件搜索&#xff08;带时间范围&#xff09; 在 Vue 3 中&#xff0c;你…

3接上篇 我的自定义GPTs的改进优化 与物理世界连接成功 GPTs的创建与使用定义和执行特定任务的功能模块 通过API与外部系统或服务的交互

https://blog.csdn.net/chenhao0568/article/details/134875067?spm1001.2014.3001.5502 从服务器日志里看到请求多了一个“location” 23.102.140.123 - - [08/Dec/2023:14:02:20 0800] "GET /getWeather.php?location&locationNewYork HTTP/1.1" 200 337 &…

【基于ESP32无线蓝牙上传电脑Excel透传数据】

【基于ESP32无线蓝牙上传电脑透传数据】 1. 引言2. 环境搭建2.1 硬件准备:2.2 软件准备:2.3. 配置Excel端口接收功能3. 测试代码4. 连接电脑和 ESP324.1 烧录程序4.2 启动蓝牙服务4.3 测试数据透传5. 总结1. 引言 随着物联网技术的发展,越来越多的设备开始支持无线通信,其…

八路达林顿晶体管-ULN2803和ULN2804-笔记

八路达林顿晶体管的介绍 ULN2803示例 BULN2803LV 是专为低压系统设计的大电流达林顿管阵列&#xff0c;电路由八个独立的达林顿管组成&#xff0c;每个达林顿管带有续流二极管&#xff0c;可用于驱动继电器、步进电机等感性负载。单个达林顿管在输入电压低至 1.8V 状态下支持电…

京东数据运营(京东API接口):10月投影仪店铺数据分析

鲸参谋监测的京东平台10月份投影仪市场销售数据已出炉&#xff01; 10月份&#xff0c;环同比来看&#xff0c;投影仪市场销售均上涨。鲸参谋数据显示&#xff0c;今年10月&#xff0c;京东平台投影仪的销量为16万&#xff0c;环比增长约22%&#xff0c;同比增长约8%&#xff1…

2022年第十一届数学建模国际赛小美赛D题野生动物贸易是否应长期禁止解题全过程文档及程序

2022年第十一届数学建模国际赛小美赛 D题 野生动物贸易是否应长期禁止 原题再现&#xff1a; 野生动物市场被怀疑是此次疫情和2002年SARS疫情的源头&#xff0c;食用野生肉类被认为是非洲埃博拉病毒的一个来源。在冠状病毒爆发后&#xff0c;中国最高立法机构永久性地加强了野…

Linux内核上游提交完整流程及示例

参考博客文章&#xff1a; 向linux内核提交代码 - 知乎 一、下载Linux内核源码 通过git下载Linux内核源码&#xff0c;具体命令如下&#xff1a; git clone git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git 实际命令及结果如下&#xff1a; penghaoDin…

【linux系统编程】编辑器gcc/g++

目录 Linux下的编辑器 介绍&#xff1a; 1&#xff0c;编辑器gcc/g 1-1&#xff0c;系统的编译过程 1-2&#xff0c;预处理过程 1-3&#xff0c;编译过程 1-4&#xff0c;汇编过程 1-5&#xff0c;链接过程 Linux下的编辑器 介绍&#xff1a; Linux系统下可支持很多高…

生成式AI赋能千行百业加速创新,2023亚马逊云科技re:Invent行业盘点

2023亚马逊云科技re:Invent全球大会已于上周圆满闭幕&#xff0c;在本次大会中&#xff0c;亚马逊云科技又为大家带来了很多功能/项目迭代更新&#xff0c;也重磅发布了很多全新的功能。今天从行业视角来盘点回顾哪些重磅发布适用于垂直行业客户&#xff0c;以及面向汽车、制造…