用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 ...
随机推荐
- AML LCD debuged
root@k101:/ # cat /sys/class/lcd/debug Usage: echo basi ...
- java 提高效率的做法
可供程序利用的资源(内存.CPU时间.网络带宽等)是有限的,优化的目的就是让程序用尽可能少的资源完成预定的任务.优化通常包含两方面的内容:减小代码的体积,提高代码的运行效率.本文讨论的主要是如何提高代 ...
- armel、armhf和arm64
1 这些名词是什么的缩写 1.1 armel 是arm eabi little endian的缩写.eabi是软浮点二进制接口,这里的e是embeded,是对于嵌入式设备而言. 1.2 armhf 是 ...
- C++文件IO操作的简单示例
CppIODemo1.cpp #include <iostream> #include <fstream> #include <chrono> #define IN ...
- DOM操作三
1.以一个对象的x和y属性的方式返回滚动条的偏移量 function getScrollOffsets(w){ //使用指定的窗口,如果不带参数则使用当前窗口 w= w || window; //除了 ...
- 【POJ3740】Easy Finding DLX（Dancing Links）精确覆盖问题
题意:多组数据,每组数据给你几行数,要求选出当中几行.使得每一列都有且仅有一个1.询问是可不可行,或者说能不能找出来. 题解:1.暴搜.2.DLX(Dancing links). 本文写的是DLX. ...
- Hadoop一些要注意的点
1.大多小文件的劣处: a. 生成更多的map任务,额外的开销: b. 每个文件都需要守址时间: c. HDFS上namenode需要占用内存空间:
- vue中导出Excel表格
项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待. 1.首先我们需要安装 ...
- local_irq_disable
local_irq_disable 仅仅是 设置 当前CPU 的中断屏蔽位 disable_irq 是禁用 全部cpu 中断(只是当前irq) 如果你要禁止所有的中断该怎么办? 在2.6内核中,可以通 ...
- POJ3685 Matrix —— 二分
题目链接:http://poj.org/problem?id=3685 Matrix Time Limit: 6000MS Memory Limit: 65536K Total Submissio ...