JS:非行间样式

一染星辰

于 2021-10-06 18:56:56 发布

阅读量132

点赞数

分类专栏： p2 原生js javascript概念文章标签： javascript html5 vue.js

本文链接：https://blog.csdn.net/weixin_59519449/article/details/120628003

版权

本文详细探讨了JavaScript如何操作非行内样式，通过DOM操作改变元素的CSS属性，实现动态样式效果。内容覆盖了选择器的使用、样式设置技巧及在Vue.js中应用非行内样式的实践案例。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				border: 1px solid red;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box" style="color: blue;">
			获取非行间样式 currentStyle/getComputedStyle
		</div>
	</body>
	<script type="text/javascript">
			//console.group("1.获取非行间样式");
				(function(){
					var box=document.querySelector("#box");
					var styleColor=getStyle(box,"color");
					console.log("color",styleColor);
					var styleBorder=getStyle(box,"border");
					console.log("border",styleBorder);
					var stylePadding=getStyle(box,"padding");
					console.log("padding",stylePadding);
					var styleMargin=getStyle(box,"margin");
					console

最低0.47元/天解锁文章

一染星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS:非行间样式

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ border: 1px solid red; padding: 10px; } </style> </head> <body> <d.
复制链接

扫一扫

专栏目录