为什么将css样式放在css文件和直接在标签中使用style属性所表现的不同?

第一种直接在div标签上标明style

        <div class="changeX">a元素</div>
        <div class="changeY" style="display: none;">b元素</div>
        <input type="button" value="切换显示a元素" onclick="gr('.changeX','.changeY');" />
        <button onclick="gr('.changeY','.changeX');">切换显示b元素</button>
        <script type="text/javascript">
            function gr(s1, s2) {
                document.querySelector(s1).style.display = "";
                document.querySelector(s2).style.display = "none";
            }
        </script> 

可以实现点击按钮使各内容表示

第二种将代码分离

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>测试代码</title>
        <style type="text/css">
            .changeY{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="changeX">a元素</div>
        <div class="changeY">b元素</div>
        <input type="button" value="切换显示a元素" onclick="gr('.changeX','.changeY');" />
        <button onclick="gr('.changeY','.changeX');">切换显示b元素</button>
        <script type="text/javascript">
            function gr(s1, s2) {
                document.querySelector(s1).style.display = "";
                document.querySelector(s2).style.display = "none";
            }
        </script>
    </body>
</html>

只能实现点击第二个按钮将盒子内容隐藏而不能显示盒子内容

0

3个回答

            function gr(s1, s2) {
                document.querySelector(s1).style.display = "block";
                document.querySelector(s2).style.display = "none";
            }

1
jslang
天际的海浪 回复weixin_43645287: 多个有相同class标签要改用document.querySelectorAll()获取一个数组。然后循环逐一设置
7 个月之前 回复
weixin_43645287
名山小奏 回复weixin_43645287: 问题已解决!谢谢
7 个月之前 回复
weixin_43645287
名山小奏 那同时选择多个有相同class标签呢
7 个月之前 回复

你 ".changeY"类已经有display:none了, 用函数这是只是让div标签里面的style没有, 然后就应用类.changeY, display: none

要将代码分离, 切换显示不显示, 直接切换类ok? 一个类show, 一个类hide就完事了....
代码分离了就不要直接该element标签里的style了

1

document.querySelector(s2).style.display,这个里边的style是元素的属性,属性上的样式是优先于类,但熟悉标签没有的情况下,类标签就生效了。

1
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
引入CSS样式表的三种方法
1.行内式 &amp;lt;标记名 style=&quot;属性1:属性值1;属性2:属性值2;属性3:属性值3;&quot;&amp;gt;内容&amp;lt;/标记名&amp;gt;        该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标记及嵌套在其中的子标记起作用。 &amp;lt;body&amp;gt; &amp;lt;h2 style=...
写在html和css文件的样式不起作用,element.style的样式修改
     我感觉前端知识真的太难了,后端通常的知识就是crdu,相对还是比较熟悉。前端实在是不好整。一个样式挑错,估计半天过去了,有可以还解决不了。     看来我还是太菜了。     引用第三方插件的时候,在大体的宽度上,总是不太合适。细节的样式非常不错,基本不用改。我遇到的难题经常就是一些自动生成的类,自动引用css文件,公共的css样式是不能调的。这个怎么办?    如果是jq的话,直接定位...
在HTML中使用CSS样式的几种方式
1.内联方式(行内样式)就是在HTML的标签中使用style属性来设置css样式 格式:<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签><p style="color:orange;font-size:18px">在HTML中如何使用css样式</p>特点:仅作用于本标签。2. 内部方式(内嵌样式)就是在head标签中使用标签来设置css样式 格式:
CSS样式的引入方式及使用位置
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 CSS可以写到那个位置? 是不是一定写到html文件里面呢? 不一定,通常有三种方式,内部样式表,行内式,外部样式表。 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: &amp;lt;head&amp;gt;...
web-inf文件夹下的外联css样式路径问题
今天练习web项目时就把以前放在webContent文件夹下的jsp放到了web-INF文件夹下(注:web-INF文件夹里的内容不能被浏览器直接访问),这时,我产生了这样的问题:如果我在Login.jsp里用到my.css样式,我该怎么写?是href="../../css/my.css"还是href="../css/my.css"?然后我便百度了一下,说是第二种,理由大概是因为../直接返回了根
把onmouseover事件写在css文件里面
一般的写法是直接在页面无素的标签里面写以下这样的代码:onmouseover="this.style.backgroundColor=#FFFFFF" onmouseout="this.style.backgroundColor=#000000"如果想把 鼠标事件 写进 样式表当中:.showCSS{event:expression(onmouseover = function()
HTML中引入CSS文件的几种方法
概况来说有以下四种:        1.行内式:也称内联式,在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势;        2.嵌入式:将CSS样式集中写在网页的标签对的标签对中;        3.链接式:跟第4个的导入式都称外部式或者外联式,使用link引用外部CSS文件;        4.导入式:使用@import引用外部CSS文件; ----------
原生JS获取内嵌,外部css样式,使用style只能直接获取内联style的属性值
html> html lang="en"> head> meta charset="UTF-8"> title>JS原生获取style属性值title> style> #div { width: 200px; height: 200px; background-color: #ff00f
css里同一个标签定义了两种样式,哪一个有效?
后者有效。 例1:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ color:red; font-size:30px; height: 1
使用link与@import引入css文件用法区别
页面导入外部css文件的方法通常有两种,一种在网页中直接link标签加入,另一种在页面中@import引入css文件。两种引入形式如下: link引入形式:<link href="styles.css" type="text/css" />@import引用形式:<style type="text/css">@import url("styles.css");</style>
在htm中引入css样式的方式
CSS概述 层叠样式表,可以对html页面进行美化,实现了显示内容的html代码和展示样式的css代码的分离, 增强了页面的展示能力。 在html页面中引入css样式的方式 (1)通过标签上的style属性引入 可以使用标签上的style属性为当前标签引入具体的css样式 aaabbbccccaaabbbccc (2)通过style标签的方式引入
CSS中外部样式与导入外部CSS样式文件的区别
1)外部样式是CSS样式中较为理想的一种形式。将CSS样式代码单独地放在一个独立的文件中,由页面进行调用,多个网页可以调用一个外部样式文件,因此可以实现代码的最大化使用及网站文件的最优化配置。一般是采用 在上面的代码中,在标签中使用标签,可以将link指定为stylesheet样式,用href指明外部样式的文件的路径,我们平时只需要将所需的样式的编写在这个文件中就可以了。而且我们使用这种方式的
JSP中引用CSS样式无效的情况
今天碰到了这个情况,折腾了半天才解决,拿来和大家分享 我写了一jsp页面,其中引入了Mycss.css样式,具体代码如下: 没想到碰到了提交jsp页面中表格,然后转发到该页面中,引入样式无效的情况,仔细检查了一下路径目测没问题,最后只能想到可能是转发后该页面不能识别css路径,所以抱着试试的心态,改成了绝对路径,这里用到了jsp页面生成的对象basePath,定义如下:<% String
href和src的区别/把CSS放头部,script放下方的原因(文档加载问题)
href和src的区别 一般加载CSS用href,并放在头部;加载script用src,放在body内的下方。 href 是hypertext reference的缩写,表示超文本引用,用来建立当前元素和文档间的链接。常用的有link,a。 当CSS使用href引用,浏览器会识别该文档问CSS,并行下载,不会停止对当前文档的加载。 src 是source的缩写,是资源,页面必不
在jsp中如何引入css的三种方法
对于初学者,高手勿喷! 1、 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在(文档的)头部:   2、内部样式 当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用标签在文档头部定义内部样式表。 样式 3、内联样式 当样式仅需要在
css中样式属性的获取
_.style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。 _.currentStyle可以弥补style的不足,但是只适用于IE。 _.getComputedStyle同currentStyle作用相同,但是适用于FF、opera、safari、chrome。 getComputedStyle:   说明 :一个可以获取当前元素所有最终使用的CSS属性值。返回
HTML中的Style标签media属性控制打印内容样式
最近项目用到Web页面打印报表的功能,了解了下window.print()han'shu
同样的css文件,在Html与JSP文件中显示的样式不同
相同代码的情况下可能的原因: dtd的不同(HTML 标签) 查询资料了解一下dtd: http://www.w3school.com.cn/tags/tag_doctype.asp 所有浏览器都支持 声明。 定义和用法 声明必须是 HTML 文档的第一行,位于 标签之前。 声明不是 HTML 标签;它是指示 web 浏览器关
H5 css引入方式 内联样式表
内联样式表 通过style标签进行设置 &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;引入方式&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; p{color:red;} i{color:yellow;} u{color:white;} em{color:greenyellow;} su
scoped带来的vue中css样式问题 及解决方法
做vue项目也一段时间了,为了确保css不被全局污染,我们给每个组件的style添加了scoped,其实这样就实现了样式的模块化 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: &amp;lt;style scoped&amp;gt; .example { color: red; } &amp;lt;/style&amp;gt; &amp;lt;template&amp;gt; &amp;lt...
前端性能优化第四篇-为什么在head中引入CSS
前端性能优化第四篇-为什么在head中引入CSS 写在前面:有很长一段时间没有更新这个专栏,是因为在准备一些课程上的东西,不过这个专栏一定不会烂尾的~ 写这篇文章的原因是因为从我初学前端开始,就一直有人告诉我:“样式表文件在head中通过link引入,script文件在body的末尾引入,这样页面加载速度更快。”那么着一切究竟是为什么呢,下面我们来看一下~ (如果真的不想看这些铺垫内容,不妨直...
内联式css样式,直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。这一小节先来讲解内联式。 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: 这里文字是红色。 注意要写在元素的开始标签里,下面这种写法是错误的: 这里文字是红色。style="color:red"> 并且css样式代码要写在style="
将css放在头部,js放在尾部可以优化页面???
DOMContentLoaded和load的区别,页面优化
.css文件中各样式写法:html标签,id,class
html标签,id,class
使用正则表达式去除html中的标签元素以及js和css脚本和样式
public static void main(String[] args) { String str = readFile(new File(&quot;D:\\workspace\\izbra_front\\WebRoot\\aa\\aa.java&quot;)); // 先过滤 script 标签 String reg_tag = &quot;&amp;lt;[\\s]*?#t#[^&amp;gt;]*?&amp;gt;[\...
CSS的四种引入方式
在HTML中引入CSS的方法主要有四种,它们分别是行内式、内嵌式、链接式和导入式。 1.行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。 2.内嵌式 嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下: ...此处写CSS样式 缺点是对于一个包含很多网页的网站,在每个网页中使用嵌入式,
避免同时在HTML和在CSS中编写CSS样式存在冲突问题
前端css样式可以在HTML和css中进行书写,但两种方式存在着优先级问题,导致出现冲突 例: 在HTML中添加样式 在CSS中添加样式 我们在写代码时会觉得页面效果应该是一个 宽550px,高300px的半透明椭圆, 实际上效果是一个宽高皆为200px的半透明椭圆,如下: 以上情况是优先级问题引起的,代码执行的时候先执行HTML代码,再执行CSS中的样式代码,所以当我们同时在HTML和CS...
Vuejs使用scoped(私有) style为v-html中标签添加CSS样式
最近使用Vue框架的时候遇到一个问题,就是后台把数据写好了,而且写好的数据的某些内容是html格式的,使用Vue框架的v-html虽然可以很简单的就把数据转换成html的标签渲染在页面上,但是有些样式得自己去微调,这时候就会发现,样式根本就无法调试,上网查了些资料,总算弄明白了。 其实只要给选择器添加上 `&amp;gt;&amp;gt;&amp;gt;`这个玩意就行了,但是我也遇到一些问题 这样子,直接在属性第...
CSS list-style修改列表属性控制li标签样式
list_style属性用于修改列表的属性  格式如下:  list_style:列表项标记类型 列表项标记的位置 列表项标记;  也可以单独设置列表项标记:  list-style-type用于设置列表项类型:  默认值为disc为实心圆,  常用值:none空  circle空心圆  square实心方块  decimal数字  lo
html页面中引入css样式的3种方式
1.行内样式:直接在html的元素上使用style的属性编写CSS,如下: span style="color:#00FF00 ;font-size:100px;">学无止境,不忘初心span> 2.内部样式:在html的标签中使用标签来定义CSS,如下: 这里可以使用元素选择器,类选择器,id选择器 ,组合选择等多种方式对html标签渲染。下面的例子中使用的是标签选择器
【Bootstrap】本地css样式放置的位置,以及jsp文件中如何引用样式
【前言】在项目里用了Bootstrap框架,第一次写前端,发现不知道如何引用样式。 首先样式文件css js fonts放在什么地方? 按照现在的常用做饭,css放在WebContent目录下,而不能放在WEB-INF目录下 其次,如何引用CSS? 在Bootstrap样例代码中,核心库用了一个外部的cdn 如果我本地有现成的css文件夹,就放在了WebConte
CSS - 导入样式文件的两种方法: link 标签和 @import 指令
1. link 用法 语法: "url路径" rel="stylesheet" type="text/css" media="媒体查询列表"/> 示例: "common.css" rel="stylesheet" type="text/css" media="print,tv"/> link 是 HTML 文件中的标签,在 标签中使用。如果指定了媒体查询类型,则只有在满足条件的
html中利用link引入的css样式必须放入head中吗?
html link js 加载
css覆盖html中样式style的参数
在制作屏蔽百度右侧广告的时候的css文件的时候, 百度搜索页中个控制显示的样式参数是在 style中写的,如下图: 使用场景及原理: 上图是通过浏览器 F12 看到的网页的样式,可知 基本的样式中(style的参数),display是block 想做到去百度搜索页面的广告,没办法做到更改百度网页的html网页,但我们可以做到更换网页的css文件, 在此处,如果直接在css文件中将 di...
Jsoup修改style中的属性值
---------------------首先,Jsoup真是强大好用到无以复加,对开发jsoup的大神表示崇高的敬仰。--------------------------- 工作中需要对word文档进行解析,获取文档的所有标题以及每一个标题下包含的内容。 文档是标准的word文档,所以讲文档转换成html文件之后,html文件也是标准的格式,每一个章节标题都是标签。那么接下来就是使用jsou
jsp页面中引用css样式表
软件工程中做Web前端开发写jsp页面时觉得页面非常丑,经同学介绍插入了css来改善页面美观度的问题。 如何在jsp页面中引入css样式表文件? 1,  首先把写好的css样式表内容存为*.css格式。如style.css 2,  在页面中引入这个css 样式文件。用如下的方式引入。 "stylesheet" href="./css/style.css" type="text
CSS切换不同样式,使用三元运算(vue)
在进行项目样式的时候,常常需要将不同按钮下的视图设置为不同的样式,如果反复写样式,会增加代码的重复量。这个时候就可以选择三元运算进行判断。有几种情况,如下: 1. 切换不同的类型。这里说的是,需要两种不同的样式类型,样式类型是完全不同的。这个可以这样使用,:class=“[leiXingFenZu ? $style.TitleTypeFont : $style.favFontNew]”,这里的判
在HTML文档中嵌入CSS的几种方式
在HTML中常用以下3种方式定义CSS:Embedding(嵌入式)、Linking(引用式)、Inline(内联式)
IE8、7、6动态添加样式时,CSS hack的BUG
问题描述 下面这段CSS代码通过JS动态添加,结果会怎样呢? .box { background: red; /* normal browsers */ *background: blue; /* IE 6 and 7 */ _background: green; /* IE6 */ }  通过以下代码添加到页面中 var node = d
ASP.NET中使用CSS样式
1  使用link标签去调用样式,即调用css文件中的样式,可以直接将CSS文件拖拽到html页的head下面      此方法先加载css,后加载html 网页标题 2 使用style标签  网页标题 body { width:100%; }
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 web直刷教程 课程表怎么放在数据库