javascript - 一种以编程方式跨元素及其元素 :before? 传输不相关属性的方法

标签 javascript jquery css

我想到了:

#parent:before{
  width: parent.height;
  height: prent.width;
}

或者要么

parent:before{
}

along a jQuery like  $('#parent:before').width($('#parent').height());
                     $('#parent:before').height($('#parent').width());

但似乎它们都还不允许。 有什么建议吗?

最佳答案

更新方法

这里有一种方法可以完成所要求的操作,这种方法非常简单,一开始我忽略了它。

height: 100%;
width: 100%;
-webkit-transform: rotate(90deg) ;
-moz-transform: rotate(90deg) ;
-ms-transform: rotate(90deg) ;
-o-transform: rotate(90deg) ;
transform: rotate(90deg);

这是有效的,因为宽度和高度是在元素转换之前设置的。 transform-origin可能有助于正确定位它。

如果您需要正确旋转内容,您应该能够使用文本旋转。

fiddle :http://jsfiddle.net/p4nLX/1/

原始答案

好吧,这是一种将父宽度转换为 :before 高度的方法:

div {
    width: 300px;
    height: 100px;
    background-color: red;
}
div:before {
    content: '';
    display: block;
    padding-bottom: 100%;
    background-color: blue;
    width: 100px;
}

百分比填充(我认为还有边距)基于父元素的宽度。

fiddle :http://jsfiddle.net/p4nLX/

基于这个答案:Target :before and :after pseudo-elements with jQuery你可以在这里使用 jQuery 插件:http://jquery.lukelutman.com/plugins/pseudo/jquery.pseudo.js以伪元素为目标。快速看一下,插件似乎将伪元素内容传输到 <span> 中。因此它可以被定位为伪元素不是 DOM 的一部分。

关于javascript - 一种以编程方式跨元素及其元素 :before? 传输不相关属性的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18211840/

上一篇:jQuery 应该模糊全屏背景图像

下一篇:html - 插入图片时布局移动几个像素

相关文章:

javascript - 如何像<a>一样触发div

html - Div 填充不消失;白色边框

html - 我们可以在 BEM 中制作 block 修饰符的元素吗?

javascript - AngularJS:$route 和 $routerProvider 之间的区别?

javascript - gRaphael linechart 绘制超出轴的值

javascript - Node js 在嵌套的 fs.readFile 调用中给出未定义的数据

javascript - 单击链接时获取链接的 ID

javascript - DOM 准备好后加载 iframe。文件准备好

php - 即使按下向上和向下键工作正常, Bootstrap 下拉也不起作用

javascript - 渲染动态 Enyo 中继器