javascript - 一种以编程方式跨元素及其元素传输不相关属性的方法：之前？

Question

我想到了：

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

或

parent:before{
}

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

但似乎他们都不允许。有什么建议么？

Answer 1

更新方法

这是一种完成所要求的事情的方法，它非常简单，以至于我起初忽略了它。

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可能有助于正确定位它。

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

小提琴：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;
}

百分比填充（和我认为的边距）基于父元素的宽度。

小提琴：http: //jsfiddle.net/p4nLX/

基于这个答案：Target :before 和 :after 使用 jQuery 的伪元素，您可以在此处使用 jQuery 插件：http: //jquery.lukelutman.com/plugins/pseudo/jquery.pseudo.js来定位伪元素。乍一看，插件似乎将伪元素内容传输到 a<span>中，因此可以将其作为伪元素而不是 DOM 的一部分来定位。