我想仅使用 CSS 更改可见元素的样式。有选择器吗?它只需要与 Chrome 和 Firefox 一起工作。(我正在构建一个扩展/插件)
如果没有,有没有办法用轻量级的 JavaScript 改变可见元素的样式?
当前滚动位置内可见。一个元素可以在滚动视野之外,或者部分可见。
我想仅使用 CSS 更改可见元素的样式。有选择器吗?它只需要与 Chrome 和 Firefox 一起工作。(我正在构建一个扩展/插件)
如果没有,有没有办法用轻量级的 JavaScript 改变可见元素的样式?
当前滚动位置内可见。一个元素可以在滚动视野之外,或者部分可见。
没有用于评估可见性的标准纯 CSS 规则。
正如其他人所说,jQuery(如果你想使用 jQuery)既有CSS 选择器扩展 :visible
,也有能力.is(':visible')
在任何给定的 jQuery 对象上执行以获取任何给定 DOM 元素上的计算样式.css("display")
或.css("visibility")
。
在纯 javascript 中确定对象是否可见并不是特别简单,因为您必须获取 computedStyle (考虑所有可能影响元素的 CSS 规则)并且您必须确保没有父对象被隐藏导致要隐藏的子元素。这是我在我自己的个人库中的一个功能:
//----------------------------------------------------------------------------------------------------------------------------------
// JF.isVisible function
//
// Determines if the passed in object is visible (not visibility:hidden, not display: none
// and all parents are visible too.
//
// Source: http://snipplr.com/view/7215/javascript-dom-element-visibility-checker/
//----------------------------------------------------------------------------------------------------------------------------------
JF.isVisible = function(obj)
{
var style;
if (obj == document) return true;
if (!obj) return false;
if (!obj.parentNode) return false;
if (obj.style) {
if (obj.style.display == 'none') return false;
if (obj.style.visibility == 'hidden') return false;
}
//Try the computed style in a standard way
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, "")
if (style.display == 'none') return false;
if (style.visibility == 'hidden') return false;
} else {
//Or get the computed style using IE's silly proprietary way
style = obj.currentStyle;
if (style) {
if (style['display'] == 'none') return false;
if (style['visibility'] == 'hidden') return false;
}
}
return JF.isVisible(obj.parentNode);
};
:visible
这对我来说
就像一个选择器:http: //api.jquery.com/visible-selector/
编辑javascript
:在您的“无 CSS”警告之前看到您的标签。
但这是一个 CSS 选择器。
没有办法选择不可见的元素,使用纯 CSS
http://www.w3.org/TR/selectors/
但是,如果您有类名或其他选择器,则使用 jquery 您可以执行以下操作
jQuery(selector).each(function(){
Var $this=$(this);
if ($this.css('visibility')==='hidden')
//set your style
})
编辑:编辑后,绝对没有办法单独使用 CSS 来选择视口中的内容。它是一种上下文无关的语言。
但是,您总是可以使用 jquery 处理元素偏移位置,并确定它是否在当前视口内(window.scrollposition 或类似的东西)。不过,这种类型的解决方案很快就会变得混乱。
没有纯粹的 CSS 方法可以做到这一点。正如 Kirean 的评论已经说过的,为什么你只想设置可见元素的样式?不可见的元素无论如何都不会显示它们的样式。如果您不希望不可见元素占用空间(也称为布局),则应使用display: none;
如果你真的想要一个选择器来选择可见元素,你可以按照 Widor 的建议使用 jQuery。您可以首先使用 jQuery 选择可见元素,向它们添加一个类,然后使用 CSS 选择该类的元素。
$('div:visible').addClass('visibleElement');
.visibleElement {
color: red;
}