用JS改变页面中b标签的样式啊 样式的等
用JS改变页面中b标签的样式啊 样式的等 ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@media screen and (max-width: 1000px) {
div {
color:lightblue;
}
}
@media screen and (max-width: 800px) {
div {
color:pink;
}
}
@media screen and (max-width: 600px) {
div {
color:purple;
}
} </style>
</head>
<body>
<div class="dv">每天你和阳光都在</div>
<button>点我</button>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('button').on('click',function(){
$('.dv').css('color',"red");
})
</script>
</html>
至于为什么?原因在于,当用JS执行的时候 ,是在标签内加的样式,权限很大,而用媒体查询的时候,还是CSS的标签的权限,就是div的权限,很显然,权限不够,覆盖掉标签内的权限,所以当JS执行的时候,即使上面有媒体查询的样式还是不能生效的。
把上面的代码运行一下,F12就可以知道原因了。
用JS改变页面中b标签的样式啊 样式的等的更多相关文章
- js统计页面中各个标签出现的次数,倒序排列
// html <html> <div>hello</div> <div>world</div> <a href="&quo ...
- js 和 css 中 不能使用 jsp 页面中一些 标签 和 java 代码等,应注意
js 和 css 中 不能使用 jsp 页面中一些 标签 和 java 代码等,应注意 如 ${ } <%%> 等
- JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- 禁止手机页面中A标签长按弹出路径框
//禁止手机页面中A标签长按弹出路径框 window.onload=function(){ document.documentElement.style.webkitTouchCa ...
- 在php中,如何将一个页面中的标签,替换为用户想输出的内容
前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例 ...
- js去除字符串中的标签
var str="<p>js去除字符串中的标签</p>"; var result=str.replace(/<.*?>/ig,"&qu ...
- 找到你的位置(JS在页面中的位置)最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分
找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...
- Jquery和JS获取ul中li标签(转)
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- Jquery和JS获取ul中li标签
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
随机推荐
- 漫谈程序猿系列:无BUG不生活
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...
- openwrt hotplug
由内核发出 event 事件. kobject_uevent() 产生 uevent 事件(lib/kobject_uevent.c 中), 产生的 uevent 先由 netlink_broadca ...
- C++游戏系列2:角色装备武器
很多其它见:C++游戏系列文件夹 知识点:类的组合,A类的数据成员.是B类的对象,或B类的对象.做A类的数据成员 [项目-带武器的游戏角色] 设计一个武器类,其数据成员至少要有武器名.威力,还能够加上 ...
- Express:模板引擎深入研究
深入源码 首先,看下express模板默认配置. view:模板引擎模块,对应 require('./view'),结合 res.render(name) 更好了解些.下面会看下 view 模块. v ...
- Robots协议应用与写法研究
- hdoj 1875 畅通project再续【最小生成树 kruskal && prim】
畅通project再续 Problem Description 相信大家都听说一个"百岛湖"的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其它的小岛时都要通过划小船来实现. ...
- Visio 2010 绘制流程图布局技巧
设置多个元件大小一致:https://zhidao.baidu.com/question/176608306.html 设置多个元件的对齐方式,水平等距.垂直等距等:http://jingyan.ba ...
- Qt & opencv 学习(二)
例子:打开图片并显示.打开图片利用Qt的标准文件对话框,第一步是利用OpenCV创建窗口并显示. 添加一个Button,转到信号槽添加代码: using namespace cv; Mat image ...
- gravity layout_gravity
gravity:控制当前视图的内容/子view layout_gravity:控制视图本身
- Delphi通过POST传递参数给PHP
Delphi代码 ******************************************************************************************* ...