JS CSS文件样式更改

最新推荐文章于 2024-05-24 10:41:30 发布
最新推荐文章于 2024-05-24 10:41:30 发布
阅读量511 收藏
点赞数
分类专栏： js-css样式更改 文章标签： JS 动态修改css样式 javascript 前端 css

通过更改style样式控制元素的属性

<script language="javascript" type="text/javascript">

	function test(eventObj){
			//通过更改style设定控制div
			//如何知道是哪个button被按下
			if(eventObj.value=="黑色"){
			var divColor = document.getElementById('div1');
			    divColor.style.backgroundColor = "black";
				}
				else if(eventObj.value=="红色"){
				var divColor = document.getElementById('div1');
				divColor.style.backgroundColor = "red";
			}
		}
		
	</script>
  
 </head>
 <body>
 <div id="div1" class="div1" style="width:500px;height:400px;border:1px solid ;background-color:red">
 </div>
  <input type="button" value="黑色" οnclick="test(this)"/>
  <input type="button" value="红色" οnclick="test(this)" />
 </body>


经测试上述方法也可以更改CSS文件中的设定（有可能是浏览器版本的问题）

通过更改外部CSS文件样式更改元素属性

 <link href="css_style.css" type="text/css" rel="stylesheet"/>
 <title>Document</title>
	<script language="javascript" type="text/javascript">

		function test(eventObj){
				var mydiv = document.getElementById('div1');
				if(eventObj.value=="黑色"){
					mydiv.setAttribute("class","div1");
					}
					else if(eventObj.value=="红色"){
					mydiv.setAttribute("class","div2");
				}
			}
	</script>
  
 </head>
 <body>
 <div id="div1" class="div1">
 </div>
  <input type="button" value="黑色" οnclick="test(this)"/>
  <input type="button" value="红色" οnclick="test(this)" />
 </body>


CSS文件如下：

.div1{
	width:500px;
	height:400px;
	border:1px solid;
	background-color:black;
}
.div2{
	width:500px;
	height:400px;
	border:1px solid;
	background-color:red;
}


小兰同学要独立
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 动态修改css文件的方法
10-25
css文件可以用js 动态修改，在做一些交互动作时，非常实用，下面是具体示例，大家可以看看
JavaScript修改css样式style
03-16
NULL 博文链接：https://canfly2010.iteye.com/blog/412069
关于js修改css样式
qq_39268603的博客
04-24 844
今天的学习中遇到了一个问题。就是在写的一个JS文件中有个弹出的窗口，里面手动的填写了html语句。然后这个弹窗的页面又调用了另一个JS。要求根据不同的状态修改css样式。最终解决的方法如下：方式一：通过class属性修改样式document.getElementById("tagName").className=”newClzName”;方式二：直接修改css样式tagEle.style.styl...
JS设置CSS样式的几种方式
ShuiMoYiYa的博客
05-24 70
如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式。因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式。important，推荐用这种方法设置第三个参数。某些情况用这个设置!important值无效。（只能用于某些属性，相关样式会自动识别）比如JQ的更改class相关方法。
js 实现 动态修改CSS的样式
03-30
js 实现 动态修改CSS的样式! 值得下载看看!资源免费,大家分享!!
JS中改变css样式的方法JavaScript
_陌默
11-01 299
var oLi =document.getElementById('li'); oLi.style.height=200+'px'; // 第一种 oLi.style[height] = 200+'px'; // 第二种 oLi.style.cssText ='height:200px'; // 第三种 oLi.className += 'height'; // 第四种 oLi.clas...
js 动态修改css文件用到了cssRule
12-09
在给定的标题和描述中，提到了`cssRule`对象，这是在处理CSS样式表时非常关键的一个元素。`cssRule`是CSSStyleSheet对象中的一个规则集合，允许我们读取、添加和修改CSS规则。 首先，我们需要理解`document.style...
bootstrap3源码，js文件，css文件
最新发布
06-16
`bootstrap.css`是未压缩的版本，方便开发者在调试时查看和修改样式，而`bootstrap.min.css`则是经过压缩和优化的版本，用于实际部署，以减少页面加载时间。这些CSS文件定义了栅格系统、字体、颜色、间距、按钮、...
原生js更改css样式的两种方式
10-20
本文将详细介绍两种使用原生JavaScript更改CSS样式的常见方法。 1. **通过`node.style.cssText`属性更改样式** 这种方法允许我们直接在JavaScript代码中设置元素的CSS样式。例如，假设我们有一个类名为`root`的`...
javascript 动态修改css样式方法汇总(四种方法)
10-23
为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性，如何动态修改css样式呢？面对这个问题，小编带领大家来解决javascript动态修改css样式，小伙伴们都快来学习吧
JS修改css样式style浅谈
12-03
一、局部改变样式 分为改变直接样式，改变className和改变cssText三种。需要注意的是： 注意大小写： javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果。 调用方法： 如果改变className，则事先在样式表中申明类，但调用时不要再跟style，像document.getElementById(‘obj’).style.className=”…”的写法是错误的！只能写成：document.getElementById(‘obj’).className=”…” 改变cssText 但是如果用c
JS树形菜单文件夹美化样式代码.zip
07-04
JS树形菜单文件夹美化样式代码是一款树形结构的文件夹，点击打开文件夹菜单样式代码。
如何用js修改css样式？
高先生的猫
07-15 519
如何用js修改css样式？下面本篇文章就来给大家介绍一下使用JavaScript修改css样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 共用代码： <div id="div">这是一个盒子</div> var div = document.getElementById("div"); 第一种：用cssText div.style.cssText='width:600px;height:250px;border:1px red solid;t
js修改css样式的几种方法
glgom的博客
11-02 670
参考：https://www.cnblogs.com/LiuWeiLong/p/6058059.html 1. 直接设置style的属性 element.style.属性 = 值 某些情况用这个设置 !important值无效。如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style['text-align'] = '1...
Javascript 如何访问 和 修改CSS样式(网页样式)
郁孤台之魂
01-28 6530
Javascript 访问修改页面元素的CSS样式，一般有两种方法 一种方法是访问修改元素中style属性的CSS样式，一般这样的style属性是直接写在元素上的，而不是在外部的CSS文件中；另一种方法是访问外部的CSS文件，然后修改CSS样式，下面对这两种方法进行介绍。 1.
js与css结合，在js中设置css样式
qq_40099034的博客
03-05 330
问题描述：js更改css文件中属性，而且这个属性被多次使用 ps：只在scss文件下尝试过，其他文件没有尝试过。 1、scss文件 用var()函数自定义一个属性名称，属性名称必须以“–”开头 $menuBg:var(--color-menuBg);//定义一个变量 .bg{ background-color:$menuBg; } 2、js文件 通过setProperty() 方法设置属性的值 document.getElementsByTagName('body')[0].style.se
js 修改css文件
weixin_40927315的博客
12-21 1142
document.styleSheets[0] 即可得到你所应用的第一个css rules 和 cssRules 的计数方法是不一样的！rules 是第几个选择器；cssRules 是第几条规则 document.styleSheets[0].cssRules即可得到所有css文件行 document.styleSheets[0].cssRules[0] css第一条 document.style...
js文件格式
热门推荐
成长之路
01-18 1万+
//操作处理 var handler = {     //绑定事件     bindEvent: function () {     },     //跳转档案     toDaPage : function(e) {         var url = document_url + e;         window.open(url);     },     queryHandler: fu...
js如何读取并修改本地css文件
06-11
在JavaScript中，不能直接读取和修改本地CSS文件，因为浏览器的安全机制禁止JavaScript访问本地文件系统。但是，可以通过以下几种方式来读取和修改CSS样式： 1. 通过JavaScript操作DOM元素的style属性来修改元素的内联样式。例如： ``` // 获取元素 var element = document.getElementById('my-element'); // 修改元素的内联样式 element.style.color = 'red'; element.style.backgroundColor = 'blue'; ``` 这种方式只能修改元素的内联样式，无法修改外部CSS文件中的样式。 2. 通过JavaScript创建和添加`<style>`元素，来动态插入CSS样式。例如： ``` // 创建<style>元素 var style = document.createElement('style'); // 设置<style>元素的类型和样式 style.type = 'text/css'; style.innerHTML = '#my-element { color: red; background-color: blue; }'; // 将<style>元素添加到<head>元素中 document.head.appendChild(style); ``` 这种方式可以动态添加CSS样式，但无法修改外部CSS文件中的样式。 3. 使用JavaScript库或框架，来动态修改CSS样式。例如，使用jQuery库中的css()方法： ``` // 获取元素 var $element = $('#my-element'); // 修改元素的CSS样式 $element.css('color', 'red'); $element.css('background-color', 'blue'); ``` 这种方式可以方便地修改元素的CSS样式，但需要引入第三方库或框架。 无论采用哪种方式，都不能直接读取和修改本地CSS文件，只能通过操作DOM元素或动态插入CSS来实现修改样式的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值