用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 ...
随机推荐
- Django 之ORM操作
1.什么是ORM? 全称关系对象映射Object Relational Mapping(简称ORM),是通过描述面向对象与数据库之间的对应的元数据,将对象持久化的更新到数据库中. 有了ORM,就不需要 ...
- TypeError: 'module' object is not callable 原因分析
程序代码 class Person: #constructor def __init__(self,name,sex): self.Name = name self.Sex = sex def ToS ...
- java中方法中声明三个点“...”作用
public class Test { public static void main(String[] args) { String str[] = {"s"," ...
- SWT 安装
下载地址: http://www.eclipse.org/windowbuilder/download.php 看到页面如下:选择图片标记的 3.7 (Indigo) update site lin ...
- UIPageControll 的属性和用法
UIPageControll 是继承于UIControl的一个IOS系统UI控件,可以提供给开发者设计分页效果的功能. 初始化方法 UIPageControl * page = [[UIPageCon ...
- react native 之页面跳转
第一章 跳转的实现 1.component 中添加这行代码 <View style={styles.loginmain}> <Text style={styles.loginte ...
- chdir函数的使用【学习笔记】
#include "apue.h" #include <fcntl.h> int main(void) { ) err_sys("chdir failed&q ...
- Map实现缓存
为什么要使用缓存 缓存最终的目的是为减轻服务端压力,减少网络传输请求 客户端缓存 浏览器访问自带缓存~~ 页面缓存 浏览器缓存 App客户端缓存 IOS 前端开发 底层都有缓存技术的 ( ...
- DataContractAttribute.IsReference
IsReference property in data contract It determines how objects are serialized, by default, IsRefere ...
- WAS:Thread "server.startup : 1" (00000020) and may be hung异常
有现场server启动时,启动不了,后台报错如下: [// ::: CST] ThreadMonitor W WSVR0605W: Thread ) has been active milliseco ...