JavaScript修改样式

蔚落 2024-04-17 19:58 66阅读 0赞

创建style元素修改样式

<body>
    		<h1>helloworld</h1>
    		
    		<script type="text/javascript">
    			var styleDom = document.createElement('style');
    			styleDom.innerHTML = `.bgRed{
    				background-color: deeppink;
    			}
    			.bgYellow{
    				background-color: yellow;
    			}
    			.noshow{
    				display: none;
    			}
    			.bigFont{
    				font-size: 100px;
    			}`
    			
    			var body = document.querySelector('body');
    			body.appendChild(styleDom)
    			var h1 = document.querySelector('h1')
    			h1.className = "bgYellow bigFont"
    		</script>
    	</body>

通过类名修改样式

<style type="text/css">
    			.bgRed{
    				background-color: deeppink;
    			}
    			.bgYellow{
    				background-color: yellow;
    			}
    			.noshow{
    				display: none;
    			}
    			.bigFont{
    				font-size: 100px;
    			}
    		</style>
    	</head>
    	<body>
    		<h1 class="bgYellow">helloworld</h1>
    		<button>切换样式</button>
    		<script type="text/javascript">
    			var btn = document.querySelector('button');
    			
    			var h1 = document.querySelector('.bgYellow')
    			btn.onclick = function(){
    				//注意class这个属性，在js里的属性名叫className
    				//h1.className = 'bgRed'
    				if(h1.className == "noshow"){
    					h1.className = 'bgRed bigFont'
    				}else{
    					h1.className = 'noshow'
    				}
    				
    			}
    		</script>

通过修改style属性修改样式

<style type="text/css">
    			h1{
    				background-color: skyblue;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>helloworld</h1>
    		<script type="text/javascript">
    			var h1 = document.querySelector('h1')
    			//通过style属性修改样式，如果样式属性为多单词组成，那么第二个单词开始首字母大写。即驼峰命名法的规则。
    			h1.style.backgroundColor  = "skyblue";
    			h1.style.fontSize = "100px"
    			
    			
    			h1.onclick = function(){
    				if(h1.style.backgroundColor  == "skyblue"){
    					h1.style.backgroundColor  = "purple"
    				}else{
    					h1.style.backgroundColor  = "skyblue"
    				}
    			}
    		</script>
    	</body>

发表评论取消回复

表情：

评论列表（有 0 条评论，66人围观）

还没有评论，来说两句吧...

相关阅读

相关修改placeholder样式

style> ::-webkit-input-placeholder \{ /\* WebKit, Blink, Edge \*/ col...

刺骨的言语ヽ痛彻心扉/ 2024年04月17日 21:54/ 0 赞/ 72 阅读

相关 JavaScript修改样式

建style元素修改样式 <body> <h1>helloworld</h1> <script type="text/ja...

蔚落/ 2024年04月17日 19:58/ 0 赞/ 67 阅读

相关 element select修改样式选择器修改样式

.el-input\_\_inner 未改 ![在这里插入图片描述][20210115094452204.png] 改后 ![在这里插入图片描述][waterma

╰+攻爆jí腚メ/ 2023年01月04日 13:21/ 0 赞/ 320 阅读

相关 Javascript样式指南

转载孙星繁翻译的Javascript样式指南，[原文地址][Link 1]，[英文原文][Link 2]。 Airbnb JavaScript Style Guide

逃离我推掉我的手/ 2022年08月18日 10:57/ 0 赞/ 159 阅读

相关通过样式修改鼠标指针样式

<td οnmοuseοver="this.style.cursor='hand'" οnmοuseοut="this.style.cursor='normal'"

野性酷女/ 2022年06月17日 08:23/ 0 赞/ 360 阅读

相关 bootstrap 修改carousel 样式

修改indicators和底部的间距 > .ol.carousel-indicators\{ > > bottom: 0px; > > margi

灰太狼/ 2022年06月16日 11:16/ 0 赞/ 387 阅读

相关 javascript 动态修改css样式方法+JQuery中操作Css样式的方法

JS 显示/隐藏 var img=document.getElementsByName("img"); function onclick

桃扇骨/ 2022年06月09日 09:10/ 0 赞/ 326 阅读

相关怎么用JavaScript修改已经确定好的css样式

css代码： .d{ width: 200px; background-color: red; } js&html代码

待我称王封你为后i/ 2022年06月07日 22:42/ 0 赞/ 176 阅读

相关 Javascript（六）javascript动态修改html的CSS样式

之前使用js修改html的属性达到一种交互的效果，事实上，使用js修改html的css样式可以实现一种更加绚丽的交互效果。要修改html的样式有两种方式，一种是修改styl

一时失言乱红尘/ 2022年05月17日 03:07/ 0 赞/ 808 阅读

相关修改el-input样式

HTML代码： <el-input class="textarea" placeholder="请输入用户名" auto-complete="on"></el-inp

港控/mmm°/ 2021年09月30日 02:50/ 0 赞/ 1099 阅读