Question

这里我想应用一些css到那些div是不可见的因为它的高度。所以我想动态应用一些css，这里没有显示（sanjana，giri，santhosh divs）

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>

Answer 1

如果它是内联定义的，您可以使用：

[style*="overflow:hidden;"],[style*="overflow: hidden;"]

它的作用是寻找任何类型的标签，
具有样式属性集
的并且该样式属性包含：overflow:hidden;或overflow: hidden;

然后应用相关的样式。

var value = 'initial';
var old = 'hidden';
function toggle() {
    $('div[style]').css({'overflow':value});
    var tmp = value;
    value = old;
    old = tmp;
}

[style*="overflow:hidden;"],[style*="overflow: hidden;"] {
    color:white;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" onclick="toggle()" value="toggle values">
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>

现在，如果您只想对NOT可见div进行操作，则需要使用javascript，并且可以使用Bounding框来测试某些内容是否可见：

另见How to check if an element is overlapping other elements?

$('[style*="overflow:hidden"],[style*="overflow: hidden;"]').children().each(function(index, element) {
   var $el = $(element);
   var $parent = $el.parent();
   
   // get the bounding boxes.
   var rect1 = $parent.get(0).getBoundingClientRect();
   var rect2 = element.getBoundingClientRect();
   
   // check for overlap(if it's visible)
   if(!(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)) {
                
      $el.removeClass('hidden');
   }
   else {
      // it's hidden!
      console.log('found hidden div '+$el.text());
      $el.addClass("hidden");
   }
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>

Answer 2

您可以通过javascript检查包装器的高度，然后将类添加到包装器内部不完全可见的所有元素。在包装器中添加了一个类public class SegmentedControlRenderer : ViewRenderer<SegmentedControl, RadioGroup> { protected override void OnElementChanged(ElementChangedEventArgs<SegmentedControl> e) { base.OnElementChanged(e); var layoutInflater = (LayoutInflater)Context.GetSystemService(Context.LayoutInflaterService); var g = new RadioGroup(Context); g.Orientation = Orientation.Horizontal; g.CheckedChange += (sender, eventArgs) => { var rg = (RadioGroup)sender; if (rg.CheckedRadioButtonId != -1) { var id = rg.CheckedRadioButtonId; var radioButton = rg.FindViewById(id); var radioId = rg.IndexOfChild(radioButton); var btn = (RadioButton)rg.GetChildAt(radioId); var selection = (String)btn.Text; e.NewElement.SelectedValue = selection; } }; for (var i = 0; i < e.NewElement.Children.Count; i++) { var o = e.NewElement.Children[i]; var v = (SegmentedControlButton)layoutInflater.Inflate(Resource.Layout.SegmentedControl, null); v.Text = o.Text; if (i == 0) v.SetBackgroundResource(Resource.Drawable.segmented_control_first_background); else if (i == e.NewElement.Children.Count - 1) v.SetBackgroundResource(Resource.Drawable.segmented_control_last_background); g.AddView(v); } SetNativeControl(g); } } public class SegmentedControlButton : RadioButton { private int lineHeightSelected; private int lineHeightUnselected; private Paint linePaint; public SegmentedControlButton(Context context, IAttributeSet attributes) : this(context, attributes, Resource.Attribute.segmentedControlOptionStyle) { } public SegmentedControlButton(Context context, IAttributeSet attributes, int defStyle) : base(context, attributes, defStyle) { Initialize(attributes, defStyle); } private void Initialize(IAttributeSet attributes, int defStyle) { var a = this.Context.ObtainStyledAttributes(attributes, Resource.Styleable.SegmentedControlOption, defStyle, Resource.Style.SegmentedControlOption); var lineColor = a.GetColor(Resource.Styleable.SegmentedControlOption_lineColor, 0); linePaint = new Paint(); linePaint.Color = lineColor; lineHeightUnselected = a.GetDimensionPixelSize(Resource.Styleable.SegmentedControlOption_lineHeightUnselected, 0); lineHeightSelected = a.GetDimensionPixelSize(Resource.Styleable.SegmentedControlOption_lineHeightSelected, 0); a.Recycle(); } protected override void OnDraw(Canvas canvas) { base.OnDraw(canvas); if (linePaint.Color != 0 && (lineHeightSelected > 0 || lineHeightUnselected > 0)) { var lineHeight = Checked ? lineHeightSelected : lineHeightUnselected; if (lineHeight > 0) { var rect = new Rect(0, Height - lineHeight, Width, Height); canvas.DrawRect(rect, linePaint); } } } }，使其更加明显。

＆＃13;

wrap

＆＃13;

var wrap = document.querySelector('.wrap');
var wrapHeight = wrap.offsetHeight; // just in case it's not known and set by CSS

wrap.querySelectorAll('div').forEach(function(element){
    var elementBottomPosition = element.offsetTop + element.offsetHeight;
    if(elementBottomPosition >= wrapHeight) {
        element.classList.add('some-class');
    }
});

＆＃13;

.wrap {
    height:100px;
    overflow:hidden;
    background:red;
    border:2px dashed #000;
}

.some-class {
    color: lime;
}

＆＃13;

如何将css应用于溢出：隐藏元素？

2 个答案: