认识css式样clip: 认识隐藏页面元素的另一个技巧 - HTML/CSS当前位置:& &&&认识css式样clip: 认识隐藏页面元素的另一个技巧认识css式样clip: 认识隐藏页面元素的另一个技巧&&网友分享于：&&浏览：15次认识css样式clip: 认识隐藏页面元素的另一个技巧
在页面上,我们经常会用到radio, 比如性别:男,女,保密.
但我们不喜欢默认的radio样式!我们会用其他的来替代.
我最初的做法是, 用label显示,设置radio为隐藏! (即display:)
当我点击label的时候,同时触发radio的click事件.
即: ($是jquery)
$(".label1").click(function(){
$(".radio1").click();
// 其他代码更改样式,让label显示为(非)激活状态
Firefox和Chrome都比较正常, 但IE下杯具了!
进一步调试,发现,原来IE下不会触发隐藏元素的事件,即有样式"display:"的元素.
这个时候我想到jQuery也有实现这个功能的插件!于是就去查那个插件的源码,啥也没查到!
然后Firebug查css,终于, clip印入我的眼帘.
在此,引用w3school上的说明:.cn/css/pr_pos_clip.asp
语法:object.style.clip="rect(0px,50px,50px,0px)"
默认值是auto
四个参数,和css其他样式一样,分别对应:上,右,下,左.
基于元素左上角定位!
即:(上下边界离上边的距离,左右边界离左边的距离)
上边界距上边0
右边界距左边50
下边界距上边50
左边界距左边0
可见这个是显示元素左上角50×50的范围
这个css样式要配合绝对定位样式才会起作用,即下面两个经常一起出现:
object.style.position="absolute";
object.style.clip="rect(0px,50px,50px,0px)";
回到我们radio的问题,我们不能设置radio "display:"
position :
: rect(1px, 1px, 1, 1px);
这个时候,radio不再是隐藏的,而是可见的元素,不过通过裁剪(clip),我们实际上是看不见它的, 问题解决!
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有其他回答(1)
以前做web GIS时候也碰到楼主的问题，但是一直没解决，这里给不了楼主实质的解决方法，给出以前某人给的一个建议：用div单独一个层来做object的载体
&&&您需要以后才能回答，未注册用户请先。html元素之怎么将两个元素排列在行
badiyixia Bootstrap基本使用
一、【float】
float是CSS的浮动属性，常用到的有左浮动：float:，右浮动：float:。
如下图红色框内的文字，就是用到了浮动属性float:（左浮动）
二、【position】
position是css的定位属性，而position:relative只是其中的一个相对定位属性，还有相对于父级元素的绝对定位属性：position:当然还有相对于浏览器左上角的position:的绝对定位属性。如下图的例子红框区，就是用到position:相对于浏览器的绝对定位属性：
三、【table】
table就是表格，是html语言中的一个标签，在早期的网页界面设计中，常用来做布局，通俗点也就是用来组织网页的外形结构。
这个就不举图例了，因为您随便打开一个网页，首选看到的就是网页的形状结构。
在早期的网页中，table很常用。但现在table布局已经落伍。90%以上的网站是使用div+CSS布局。
四、【实现两个元素在同一行显示】
html元素分为块级元素和非块级元素，块级元素每个都要独占一行，而多个非块级元素写在一起也只占用一行。
楼主所说的三个方法是可以实现两个块级元素在同一行显示，但是这些一般都只能使用在特定的环境。所以没有哪个最好。html和css还有很多种方法使两个块级元素在同一行显示。
使多个块级元素显示在一行最佳实践是什么?
使多个块级元素（或块级与行内元素的混搭）显示在一行最佳实践是什么？
浮动？inline-block?定位？还是。。
此前一直纠结于这个问题，浮动须清除，inline-block兼容性不好。。。
display:inline
display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span） 而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以像span一样显示在一行了。
它可以让行内显示为块的元素，变为行内显示，例如
& div& DIV1 & /div&
& div& DIV2 & /div&
这里DIV1和DIV2分别占一行，但是你给他们加上属性后变了
& div style= “display:inline “& DIV1 & /div &
& div style= “display:inline “& DIV2 & /div&
DIV1和DIV2这时候显示在同一行了，试试看吧。
和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了
& span style= “display:block “& SPAN1 & /span&
& span style= “display:block “& SPAN2 & /span&
display:inline比较经典的用法是用在 & ul& 下的 & li& 中 内联 block一般一个块占一行，除非float inline是自动排为一行，就象段内的文字一样，可成为多行。
display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span） 而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以象span一样显示在一行了。
display:inline 对应不显示为 display:none
display:block 对应不显示为 hidden
说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方
如何将两个div设置在一行?
给这两个DIV设定一个宽度，然后定义float: display:
例如HTML是这样：
& div class=”container”&
& div class=”box”& 121212& /div&
& div class=”box”& 455656& /div&
在css里面要让两个class为box的DIV并排时只要这样定义即可
.box {width:50%; float: display:}
另外，说明一下，display:inline 是可以不加的，不过有时会在某些浏览器里面出现兼容问题，一般还是加上好一点。
块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。
块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始，相邻的块级元素将会在不同行显示。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。
block元素的特点
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素
inline元素的特点
①和其他元素都在一行上；
②高，行高及外边距和内边距不可改变；
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素
常见块元素(block element)
◎ address - 地址
◎ blockquote - 块引用
◎ center - 居中对齐块
◎ dir - 目录列表
◎ div - 常用块级容器，也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表（无序列表）
常见内联元素(inline element)
◎ a - 锚点
◎ abbr - 缩写
◎ acronym - 首字
◎ b - 粗体(不推荐)
◎ bdo - bidi override
◎ big - 大字体
◎ br - 换行
◎ cite - 引用
◎ code - 计算机代码(在引用源码的时候需要)
◎ dfn - 定义字段
◎ em - 强调
◎ font - 字体设定(不推荐)
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ kbd - 定义键盘文本
◎ label - 表格标签
◎ q - 短引用
◎ s - 中划线(不推荐)
◎ samp - 定义范例计算机代码
◎ select - 项目选择
◎ small - 小字体文本
◎ span - 常用内联容器，定义文本内区块
◎strike - 中划线
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
◎ textarea - 多行文本输入框
◎ tt - 电传文本
◎ u - 下划线
◎ var - 定义变量
有的时候，我们可能需要一个所有控件都在一行中的表单，比如图3-21所示的登录。要实现这种内联样式效果，只需要在普通的form元素上应用一个.form-inline样式，即可将表单内的元素设置为内联样式。
水平线上的唯一因素就是要控制元素的显示方式为display: inline-block，所以只需要为相应的子元素设置display属性即可。但需要注意的是，该.form-inline样式只能在大于768像素的浏览器上才能应用。源码如下：
// 源码1927行
@media (min-width: 768px) {
/* 大于768像素的浏览器才生效*/
.form-inline .form-group {
display: inline-
/* 内联样式显示*/
margin-bottom: 0;
vertical-align:
.form-inline .form-control {
display: inline-
/* 内联样式显示,但由于form-control样式设置了100%的宽度,所以没什么用*/
vertical-align:
.form-inline .radio,
.form-inline .checkbox {
display: inline-
padding-left: 0;
margin-top: 0;
/* 确保上下居中*/
margin-bottom: 0;
vertical-align:
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
/* 不使用浮动定位*/
margin-left: 0;
.form-inline .has-feedback .form-control-feedback {
要注意，由于默认的样式为.form-control，且其input、select和textarea的宽度都是100%，所以在使用内联表单的时候是无效的，需要对这些控件元素单独设置宽度width，或者外面再加上一层带有.form-group样式的div元素。示例如下：
& form class="form-inline" &
& div class="form-group" &
& input type="text" class="form-control" placeholder="请输入你的用户名" &
& div class="form-group" &
& input type="text" class="form-control" placeholder="请输入你的密码" &
& div class="checkbox" &
& label & & input type="checkbox" & 记住密码& /label &
& button type="submit" class="btn btn-default" & 登录& /button &
但这种情况下，如果再设置一个label的话，input又换行了。所以如果非要label的话，那就只能在input所在div元素的上边再加一个div元素用于包含label标签。比如：
& div class="form-group" &
& label & 用户名:& /label &
& div class="form-group" &
& input type="text" class="form-control" placeholder="请输入你的用户名" &
如果没有为每个输入控件设置label，屏幕阅读器将无法正确识别。对于这种内联表单，可以通过为label设置.sr-only样式将其隐藏。比如：
& div class="form-group" &
& label class="sr-only" for="account" & 登录用户名& /label &
& input type="text" class="form-control" id="account" placeholder="请输入你的用户名" &
此条目发表在分类目录。将加入收藏夹。
2016年六月 &(1)
2016年五月 &(4)
2016年四月 &(17)
2016年三月 &(45)
2016年二月 &(7)
2016年一月 &(11)
2015年十二月 &(19)
2015年十一月 &(20)
2015年十月 &(10)
2015年九月 &(9)
2015年八月 &(24)
2015年七月 &(15)
2015年六月 &(32)
2015年五月 &(20)
2015年四月 &(33)
2015年三月 &(44)
2015年二月 &(23)
2015年一月 &(74)
2014年十二月 &(88)
2014年十一月 &(21)
2014年九月 &(6)
2016年六月
6789101112
131416171819
20212223242526
分类目录分类目录
选择分类目录
一些问题&&解决方法&&(24)
人工智能&&(15)
&&&专家系统&&(14)
嵌入式&&(1)
bootstrap&&(5)
c & c++&&(9)
command&&(39)
Contiki&&(9)
算法相关&&(4)
网络相关&&(20)
Django&&(25)
driver&&(2)
emotion&&(11)
读书笔记&&(26)
freeshell&&(11)
Html&&(14)
makefile&&(1)
nginx&&(4)
paper notes&&(4)
python&&(61)
shell脚本&&(15)
software configure&&(51)
the knowledge u need know&&(104)
ubuntu&&(83)
windows&&(3)
未分类&&(78)
收集的信息&&(10)如果两个元素的html值相等则改变另一个元素的css_百度知道
如果两个元素的html值相等则改变另一个元素的css
&lt，那么我想改变v2所在的元素即
&).getElementById(&&center&div class=& id=&#'& id=&11&#' id=&a&00&11&
var v1=00&div class=&456&&789&123&a href='&&#47.innerHTML;/div&a href='
if(v2=v1){
}&&script&a href=');456& id=&quot&11& 的CSS;&gt.getElementById(&/#'//a&&&&&gt.innerHTML;456& id=&a&#'div&a&11&/11&a href=&#39，请问if里面我要怎么写;&
如果v1所在的元素的值和v2所在的元素的值同为456即相等;title1&script&&#47
提问者采纳
00&script&gt.color=&var v2=document.getElementById(&var v1=document&);#f00&11&如果v2=v1则v2的颜色设为红色 }&if(v2.innerHTML){
v2.).getElementById(&;script&
//&#47.innerHTML==v1
还是谢谢了 你这方法我用过，这个改变的是v2这个变量的CSS
然而v2所在的元素的CSS 没发生改变
1、你这段代码应该放到window的onload事件中（或其他事件中）执行，如果页面一加载就执行是不能成功的；2、元素的ID属性是具有唯一性的，也就是说ID不可重名，否则无法运行成功。下面是我测试通过的例子：&div&class=&center&&&a&href='#'&123&/a&&a&href='#'&456&/a&&a&href='#'&789&/a&&/div&&div&class=&title1&&id=&d0&&456&/div&&script&window.onload=function(){&&&&var&v1=document.getElementById(&d0&);&&&&var&v2=document.getElementsByTagName(&a&);&&&&for(var&i=0;i&v2.i++){&&&&&&&&if(v2[i].innerHTML==v1.innerHTML){&&&&&&&&&&&&v2[i].style.color=&#f00&;&&&&&&&&}&&&&}}&/script&
提问者评价
谢谢你的帮助！虽然没达到我的效果，不过还是可以用的
来自团队：
其他类似问题
为您推荐：
其他1条回答
d 是唯一属性 你不能在一个页面出现多个 用class 循环判断是否与v1的值相等 相等就改变当前dom的css
改变css代码为&#39.style.color=&#39
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁