Question

如何使用JavaScript使以下HTML显示以下内容？我希望它与旋转值无关。显然需要getComputetedStyle，但我想不出任何简单的方法。

<div style="border:1px solid black;display:inline-block"><div style="text-align:left;background:pink;display:inline-block;">
<div id=box style="transform: rotate(-45deg);display: inline-block;background:orange;  white-space: nowrap;">
testing 1234567891011<br>
more text here<br>
and more</div>
</div>
</div>

Answer 1

在45度下效果很好。我还不确定如何从transform属性中提取45度。

<!doctype html><div style="border:1px solid black;display:inline-block"><div style="background:pink"><div id=b style="transform: rotate(-45deg) translateZ(0px);display:inline-block;transform-origin:top left;" contenteditable id=box>testing 1234125<br>
123<br>
456<br>
78910</div></div></div><script>
function toDegrees (angle) {
  return angle * (180 / Math.PI);
}

function toRadians (angle) {
  return angle * (Math.PI / 180);
}

var d = document.getElementById('b'),
    observer = new MutationObserver(callback);
observer.observe(d, { characterData: true, attributes: true, childList: true, subtree: true });
new MutationObserver(callback);onload=callback;
//document.addEventListener("input",callback);
function callback(){

d.parentElement.style.width = parseInt(getComputedStyle(d).height.slice(0,-2))*Math.cos(toRadians(45))+"px";
d.style.whiteSpace="nowrap";
d.parentElement.style.paddingTop = parseInt(getComputedStyle(d).width.slice(0,-2))*Math.sin(toRadians(45))+"px";
d.parentElement.style.height = parseInt(getComputedStyle(d).height.slice(0,-2))*Math.sin(toRadians(45))+"px";
d.parentElement.parentElement.style.width = parseInt(getComputedStyle(d).width.slice(0,-2))*Math.sin(toRadians(45)) + parseInt(getComputedStyle(d).height.slice(0,-2))*Math.cos(toRadians(45))+"px";
}</script>

倾斜旋转JS计算间距

1 个答案: