js改变css样式的三种方法推荐_基础知识

共用代码:

<div id="div">
this is a div
</div>

var div=document.getElementById('div');

第一种:用cssText

div.style.cssText='width:250px;height:250px;border:1px red solid;';

第二种:用setProperty()

div.style.setProperty('width','250px');
div.style.setProperty('height','250px');
div.style.setProperty('border','1px red solid');

第三种:使用css属性对应的style属性

div.style.width = "250px";

div.style.height = "250px";          

div.style.border = "1px solid red";

时间: 2024-09-20 15:19:22

js改变css样式的三种方法推荐_基础知识的相关文章

Javascript动态引用CSS文件的2种方法介绍_基础知识

最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现和页面换肤的时候.最近做的这个任务是用户在别人的站点上点击一个按钮,就会在别的站点页面下插入一个脚本,执行,这其中包含了样式的插入. 一般情况下javascript动态插入样式有两种,一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件,另一种是在页面中使用

前端js文件合并的三种方式推荐_基础知识

最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页面大文件,各自页面合并生成自己所需js的大文件. 3. 合并多个共用大文件,根据实践情况合并出多个共用js文件,每个页面引用多个共用大文件. 另外在我看来,合并有两个目的: 1. 为了减少请求数. 2. 代码安全考虑(文件分得越多,越容易被人看清). PS:注意我说的不是压缩混淆,只是合并 1. 一

jsp页面中插入css样式的三种方法总结

 本篇文章主要是对jsp页面中插入css样式的三种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1. 外部样式   当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表.<link>标签在(文档的)头部:   <head> <link rel="stylesheet"  type="text/css&qu

jQuery操作元素css样式的三种方法_jquery

我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addClass() - 添加CSS类 $("#target").addClass(&q

js批量设置样式的三种方法不推荐使用with_javascript技巧

一般我们都用css来批量设置样式,现在我们用js也可以批量设置样式: 总结三种方法如下 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> #div1{

JavaScript中判断对象类型的几种方法总结_基础知识

我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 type

添加css样式的三种方法

 一,行内式样式(Inline Style) 即使用style属性,将CSS直接写在HTML标签中. 例如:<p style="color:red">这行段落将显示为红色.</p> 注意:style属性可以用在<body>内的所有(X)HTML标签上,但不能应用与<body>以外的标签,如<title><head>等标签. 二,嵌入式样式表(Embedded Style Sheets) 嵌入式样式表使用"

浅谈js内置对象Math的属性和方法(推荐)_基础知识

属性: constructor 所建立对象的函数参考 prototype 能够为对象加入的属性和方法 E 欧拉常量,自然对数的底(约等于2.718) LN2 2的自然对数(约等于0.693) LN10 10的自然对数(约等于2.302) LOG2E 以2为底的e的对数.(约等于1.442) LOG10E 以10为底的e的对数(约等于0.434) PI ∏的值(约等于3.14159) SQRT1_2 1/2(0.5)的平方根(即l除以2的平方根,约等于o.707) SQRT2 2的平方根(约等于1

HTML,CSS,JavaScript速查表推荐_基础知识

事实上, 速查表 就是来帮助我们把日常中最常用到的信息聚集起来,方便使用,使我们做工作时更有效率.有了它们,免去了你的大脑花额外时间去记忆它们的烦恼--你只需要打开简表,马上能查到你想要的信息. 这篇文章里,你可以看到 最实用的HTML,CSS,JavaScript速查表 ,它们可以当作参考资料,备忘录,能帮助你以最快的速度找到想要的信息. 看看这些简表是不是你想要的,请在文章下面留下你的建议,谢谢! HTML HTML帮助手册 HTML速查手册 HTML特殊字符速查表 Dreamweaver