chromets调试

html-css012

chromets调试,第1张

chromets调试：首先其次最后使用chrome自带调试工具步骤：

1. 打开Chrome，打开任意一个网页，下图为新浪首页：

2. 按下F12键，能看到会弹出如下图所示的对话框

3. 鼠标右键需要修改的地方，在弹出的选项选择”检查“，如下图：

4. 可以看到需要改动的地方，对应区域的CSS样式都在右侧区域显示，此时在右边的代码就可以进行调试了，如下图：

搜索首先请打开“谷歌浏览器”（废话），然后打开一个网页，按“F12”会出现一个控制台，找到一个叫做“Sources”,点击它

OK，如果你的页面现在已经加载过JS脚本的话，那么应该可以看到一些JS文件了

然后你可以在左侧侧栏的序号那些位置点击一下就设置成断点，当你要执行某个函数的时候浏览器就会自动进入调试模式了

1、直接更改，比如：

xID.style.display = "block" // 更改display属性，会覆盖css中的定义。

xID.style.display = ""      // 取消js更改display属性，以css样式为准。

这里的xID，是通过id获取的标签。当然，也可能是通过tagName之类的获取的标签。

这种方式，简单直接。但是要修改大量的样式的时候，不适合。所以，我更推荐第二种方式。

2、更改类名

xID.className = "xx   yy"

如果有多个类，就用空格隔开。前提，在样式中要有已有类的定义。比如这里的xx和yy类，在css中应该是写好的。

这种方式把所有的样式写在了css文件中，适合更改较多的样式以及炫酷的样式。js就只做一件事情：改类。至于这个类会把标签变成什么样子，交给css吧。

通过jquery也可以达到如上的效果：

$("#xID").css({

  fontSize:"12px",

  display:"block"

})  // 直接更改样式

$("#xID").addClass("xx")  // 增加删除类

$("#xID").removeClass("xx")

如何配置自行百度

1.scss文件定义变量

2.js中更改$textColor 变量的值

都是获取DOM

通过DOM分别修改当前DOM样式属性值、

当前DOM整体css样式、

修改当前DOM的className类名、

将link引入的标签作为DOM 修改link的href，从而修改引用的样式表。

详情转自： https://blog.csdn.net/wx13227855087/article/details/81391787