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 ...
随机推荐
- 如何在Solidity中建立DAO(去中心化自治组织)?
本文将帮助您理解 DAO 的概念,并帮助您构建一个基本的 DAO. 什么是 DAO? 您可以将 DAO 视为基于互联网的实体(比如企业),由其股东(拥有代币和比例投票权的成员)共同拥有和管理.在 DA ...
- 五月十一号java基础知识点
1.通过add()方法向链表list输入1-10十个数for (int i = 1; i <11 ; i++) { list.add(i);//向链表添加1-10的整数 } import jav ...
- ASP.NET Core如何知道一个请求执行了哪些中间件?
第一步,添加Nuget包引用 需要添加两个Nuget包分别是:Microsoft.AspNetCore.MiddlewareAnalysis和Microsoft.Extensions.Diagnost ...
- subprocess,哈希,日志模块
hashlib模块: # 1. 先确定你要使用的加密方式: md系列,sha系列 md5 = hashlib.md5() # 指定加密方式 # 2. 进行明文数据的加密 data = 'hello12 ...
- 12年经验的大龄程序员,都用什么写 API 文档?
写代码,程序员不害怕. 写文档,每个程序员都害怕! 为什么? 技术优先,我们更倾向于将技能和精力更多地放在编写代码上,如果 API 工具不好使,不便捷,同步麻烦,测试看不懂,更会大大地打击编写文档的积 ...
- API 网关日志的价值,你了解多少?
本文介绍了 API 网关日志的价值,并以知名网关 Apache APISIX 为例,展示如何集成 API 网关日志. 作者钱勇,API7.ai 技术工程师,Apache APISIX Committe ...
- 基于.Net开发的ChatGPT客户端,兼容Windows、IOS、安卓、MacOS、Linux
2023年目前要说最热的点,肯定是ChatGPT了. ChatGPT官方提供的网页版本,还有需要科*上网,很多人都会基于此进行封装. 现在是移动互联网时代,基于手机APP的需求还是很大的. 所以,今天 ...
- 《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
1.简介 在App开发的过程当中,抓包是一个很常见的需求,而有些app的请求不会在网络设置代理时被抓到数据包,这里若是需要抓包就需要搭建反向代理. 2.什么是代理? 什么是代理,来一张图了解一下. 代 ...
- python介绍、32位与64位系统的区别、python安装、pip管理安装包
一.python的介绍 * python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为 ...
- BugKu_never_give_up
if(!$_GET['id']) { header('Location: hello.php?id=1'); exit(); } $id=$_GET['id']; $a=$_GET['a']; $b= ...