用js调试css 画出所有的css布局

最新推荐文章于 2022-03-04 17:46:55 发布

原创最新推荐文章于 2022-03-04 17:46:55 发布 · 1w 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。 Email: adleytales@126.com

文章标签：

#css #javascript

本文提供了一段用于浏览器调试的JavaScript脚本，该脚本能够为页面上的所有元素随机应用不同颜色的轮廓线，便于开发者直观地查看页面元素布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打开浏览器调试模式，在Console模式下复制下面代码执行

[].forEach.call($$("*"),function(a){  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) });

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AdleyTales

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用JS修改CSS的方法

明凯博客

07-09

1万+

1.js修改单个元素的css属性。 document.getElementById("obj").className="…"; document.getElementById("obj").style.backgroundColor="#003366"; 2.js修改整个页面的css属性。 link rel = "stylesheet" type="text/css" id="css" href="firefox.css" /> <span on click="javascript:docum

纯JS实现鼠标划过时显示提示框

12-27

js提示框特效制作多种js提示框效果,如js文字提示框,js图片提示框,js tooltip文字与图片提示框。一款很实用的js提示框插件。

参与评论您还未登录，请先登录后发表或查看评论

JS成神之路（六）：css的布局样式

小毛驴

06-23

259

display(block,inline,inline-block,none,inherit,flex) display属性每个元素都有，比如div默认属性值block,span的默认属性值inline 注意：inline-block可以将块级元素变为行级元素，单需要消除magin。对行级元素设置宽高不起作用，magin,padding都只对左右起作用。 position 在布局中很重要的因素就是定位，position 属性就是用来定义元素的定位机制。position 的常用属性值有： • rel..

JS CSS 样式调试工具

thinker

12-21

229

最近一直搞demo，搞样式搞的头大，就想找个样式调试工具来调节，在网上找了下，具体地址如下，内有说明： --工具下载地址 [url]http://www.my-debugbar.com/wiki/[/url]...

页面脚本（js、css等）调试技巧介绍

yan_dk的专栏

07-11

780

许多浏览器都支持页面源码的查看、调试功能，使用chrom浏览器自带的调试器简洁、方便、功能强大。原理大致是调试器帮助我们将页面的元素解析，我们选中页面元素，通过“审查元素”，很快就能定位到该元素的页面代码，还帮我们对这些页面元素对应的样式、js脚本等进行跟踪解析，让我们了解页面结构化、功能化的实现，这样给我们分析页面源码带来了很多方便，不用一行行代码去阅读枯燥的页面。一般常见的页面分析、调试技巧很

前端调试技巧包含css，js

山海一哥的博客

08-02

325

一，js篇通常来讲我们都喜欢一个console，简单方便，个别时候还能当日志来看，但是有些时候呢用console是不行的，比如判断一个值的时候，如果该值是‘fasle’，那么代码的运行结果可能并不能如你所料，这个时候最好的方式便是打个断点。运行的时候呢，打开控制台的source，如下所示二，css篇选中所要查看的dom节点，即可查看有个该节点的所有信息对于hover，active这样的样...

前端所需js、css文件，解决你的燃眉之需，下载下来直接可以使用

热门推荐

小丞同学

05-10

1万+

Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，也是唯一的二维布局方案，利用grid布局可以很轻松的实现很多的网页布局

使用js操作css

weixin_67235801的博客

03-04

3708

JavaScript如何操作css

如何使用JS操作CSS

不甘于平凡的溃败的博客

08-14

8290

方法: document.getElementById("xx").style.xxx中的全部属性是什么盒子标签和属性对比 CSS语法（不区分大写和小写） JavaScript语法（区分大写和小写） border border border-bottom borderBottom border-bottom-color borderBottomColo...

JS如何调用CSS样式表

醉ぃ灬清风。

09-28

7220

JS1: head=document.getElementsByTagName("head"); function js_on(){ var js=document.createElement("script"); js.type="text/javascript"; js.src="importcss.js"; head[0].appendChild(js); } window

js+css实现滑动切换切换div的不同显示

hongfei568718926的博客

10-01

7859

先看效果(没有被破坏的源码,只需要改动即可实现你的功能) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content...

html把圆形分成10份,如何使用css3 / javascript将圆圈分成12个相等的部分

weixin_30478241的博客

06-29

1360

这可以使用CSS转换完成1)对于12个相等的切片,每个切片角度将为30度.2)我们需要根据垂直轴和切片开始之间的角度旋转每个切片.因此第一个切片将旋转0度,最后一个切片旋转330度3)此外,我们需要将每个切片倾斜减去(90度 – 切片角度)在这种情况下,它是 – (90deg – 30deg)= skewY(-60deg)4)关于案文：a)我们需要用skewY(60deg)去掉切片内容b)为了使文...

CSS布局之定位布局

gfhdgo的博客

08-16

223

一、静态定位（ Static positioning）是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。 position: static; 二、相对定位（ Relative positioning ）相对定位就是相对于自己以前在标准流中的位置来移动 position: relative; 使top,right,bottom,left来控制。单独使用相对定位很少，大部分都是和绝对定位一起使用，形成子绝父相。注意点：相对定位是不脱离标准流的,...

掌握css动画与js交互技巧：js-css.zip文件深度解析

资源摘要信息:"js-css.zip文件包含了两个主要部分的内容，即CSS和JavaScript代码文件。在现代网页设计与开发中，CSS（层叠样式表）负责定义网页的布局、设计和视觉效果，而JavaScript则用于实现网页的交互性和动态...