js修改css样式
修改宽度:
document.getElementById("div1").style.width="200px";
修改border-radius:
document.getElementById("div1").style.borderRadius="100px";
修改背景图片:
document.getElementById("div1").style.backgroundImage='url(img.jpg)';
或者:
document.getElementById("div1").style.cssText="border-radius:100px; width: 200px; background-image: url(img.jpg)";
注意:
1:用style.属性名="属性值" 的时候属性名可能要改变一下,比如border-radius要变为borderRadius;background-image要变为backgroundImage;
但是用style.cssText的时候里面属性名的写法和css的写法相同。
2:两种方法最好不要混用,当用style.cssText设置之后,写在这句代码之前的style.width等等将会失效。
CSS参考手册:http://www.ziqiangxuetang.com/cssref/css-reference.html
http://www.w3school.com.cn/h.asp
js修改css样式的更多相关文章
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
- JS笔记一:动态修改css样式
---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- javascript 修改css样式
abc.css CSS code .class1 { width:10px; background-color: red; } HTML code <!DOCTYPE ...
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
- js中css样式
1.js操作css样式 例如 div . style . width=“100px”. 就是在div标签内我们添加一个style属性,并设定了width值,这种写法会给标签带来大量的style属性,跟 ...
- js操作css样式、js的兼容问题
一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- php有效的过滤html标签,js代码,css样式标签
过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
随机推荐
- 2023年这个星球共同话题chatgpt,火爆全球的chatgpt到底是啥?会抢谁的饭碗?如何避免沦为ChatGPT时代的废物
2023年初到现在这个星球人人谈chatgpt,火爆全球的#chatgpt 到底是啥?会抢谁的饭碗?如何避免沦为ChatGPT时代的废物 ChatGPT的横空出世迅速点燃了外界的关注.推出仅两个月后, ...
- 管理WEB服务器文件的WebDAV协议&HTTP大跃进--QUIC与HTTP30&WEB安全攻击概述
管理WEB服务器文件的WebDAV协议 WebADV协议 WEBDAV追加方法 WeDAV请求示例 HTTP大跃进--QUIC与HTTP30 QUIC&HTTP3.0 HTTP2.0的问题 队 ...
- docker方式实现minio数据持久化离线安装
保存镜像 root@hello:~# docker pull minio/minio Using default tag: latest latest: Pulling from minio/mini ...
- 配置了一台3700X电脑后
众所周知,电脑是生活中必不可少的玩具,最近搞了一套配置.CPU3700X,显卡RX580,内存32GB.敲,这CPU的框框,看见就爽的不得了. As we all know, a comput ...
- python之多线程操作
线程模块 Python3 通过两个标准库 _thread 和 threading 提供对线程的支持. _thread 提供了低级别的.原始的线程以及一个简单的锁,它相比于 threading 模块的功 ...
- [Linux]常用命令之【mkdir/touch/cp/rm/ls/mv】
cp 将来源文件夹packageA下的所有目录及文件复制到新文件夹packageB下,形成: /packageB/... # cp -r /home/packageA/* /home/cp/packa ...
- 脚本:bat批处理常用脚本
windows下有很多场景需要编写批处理来解决问题,跟定时任务相结合使用更佳. 1.创建文件,md,mkdir都可以进行文件创建 set AwrPath=D:\OracleTabChk if not ...
- 基于kubeasz部署高可用k8s集群
在部署高可用k8s之前,我们先来说一说单master架构和多master架构,以及多master架构中各组件工作逻辑 k8s单master架构 提示:这种单master节点的架构,通常只用于测试环境, ...
- GraalVM(云原生时代的Java)和IoT在边缘侧落地与实践
环顾四周,皆是对手! 云时代的掉队者,由于Java启动的高延时.对资源的高占用.导致在Serverless及FaaS架构下力不从心,在越来越流行的边缘计算.IoT方向上也是难觅踪影; Java语言在业 ...
- 业务系统对接CAS
启动类加@EnableCasClient <!--cas客户端--> <dependency> <groupId>net.unicon.cas</groupI ...