【JS】使用js添加css样式

最新推荐文章于 2024-03-05 13:48:53 发布

_壮

最新推荐文章于 2024-03-05 13:48:53 发布

阅读量855

点赞数

分类专栏： js 文章标签： css js html javascript css3

本文链接：https://blog.csdn.net/QQ1356718683/article/details/106908465

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用js添加css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-2.1.1.min.js"></script>
	</head>
	<body>
		<div class="zz-style" id="zz-id" ></div>
		<div class="zz-style" name="zz-name" ></div>
	</body>
</html>
<script>
	//JS字符串使用占位符
	String.prototype.signMix= function() {
		if(arguments.length === 0) return this;
		var param = arguments[0], str= this;
		if(typeof(param) === 'object') {
			for(var key in param)
				str = str.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
			return str;
		} else {
			for(var i = 0; i < arguments.length; i++)
				str = str.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
			return str;
		}
	}
	
	var x = screen.width;
	var y = screen.height;
	
	console.log("宽度:{0};高度:{1};".signMix(x, y));
	
	getStyle();
	
	function getStyle() {
		$(".zz-style").width(x * 0.3).height(y * 0.3);
		
		$("#zz-id").text("嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷");
		$("#zz-id").css({backgroundColor:'#000000', color:'white', fontSize:'60px', paddingTop: y * 0.01 + 'px', marginLeft: x * 0.01 + 'px'})
		$("[name=zz-name]").text("呜呜呜呜呜呜呜呜");
		$("[name=zz-name]").width(x * 0.2 + 'px').height(y * 0.2 + 'px').css({backgroundColor:'#420000'});
	}
	
</script>

效果图如下所示:
在这里插入图片描述效果图

_壮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JS】使用js添加css样式

使用js添加css样式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-2.1.1.min.js"></script> </head> <body> <div class="zz-style" id="zz-id" >&lt.
复制链接

扫一扫