让一个文本元素跟踪另一个文本元素的位置

huangapple go评论82阅读模式
英文:

Have one text element track the position of another text element

问题

I would like to have the red "Aliquam" text inside of the div with class ".absolute" track on top of the exact position of the (blue) "Aliquam" text inside ".aliquam-span", including on browser resize.

我想要将红色的 "Aliquam" 文本放置在具有类 ".absolute" 的 div 元素上,与 ".aliquam-span" 内的(蓝色)"Aliquam" 文本的确切位置重合,包括在浏览器调整大小时。

I've tried a few different ways to do this but haven't had much luck - hoping that someone here can help.

我尝试了一些不同的方法,但运气不太好 - 希望这里有人可以帮助。

Nesting the text as a child of the span is not an option, unfortunately.

将文本嵌套为 span 元素的子元素不是一个选项,不幸的是。

Thank you!

谢谢!

英文:

I would like to have the red "Aliquam" text inside of the div with class ".absolute" track on top of the exact position of the (blue) "Aliquam" text inside ".aliquam-span", including on browser resize.

I've tried a few different ways to do this but haven't had much luck - hoping that someone here can help.

Nesting the text as a child of the span is not an option, unfortunately.

Thank you!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let aliquam = document.querySelector(&#39;.aliquam-span&#39;)
let aliquamAbsolute = document.querySelector(&#39;.red-text&#39;)

let aliquamRect = aliquam.getBoundingClientRect()
let aliquamAbsoluteRect = aliquamAbsolute.getBoundingClientRect()

let xOffset = aliquamRect.left - aliquamAbsoluteRect.left
let yOffset = aliquamRect.top - aliquamAbsoluteRect.top

console.log({xOffset})

aliquamAbsolute.style.left = `${xOffset}px`
aliquamAbsolute.style.top = `${yOffset}px`

<!-- language: lang-css -->

.container {
  width: 100%;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

p {
  font-size: 1.5rem;
}

.wrap {
  position: relative;
}

.absolute {
  position: absolute;
  inset: 0; 
}

.red-text {
  position: relative;
  color: red;
  left: &#39;200px&#39;;
}

.aliquam-span {
  color: blue;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;wrap&quot;&gt;
    &lt;p&gt;Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. &lt;span class=&quot;aliquam-span&quot;&gt;Aliquam&lt;/span&gt; eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.&lt;/p&gt;
    &lt;div class=&quot;absolute&quot;&gt;
      &lt;p class=&quot;red-text&quot;&gt;Aliquam&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

这是您提供的代码片段,我将不会翻译代码部分,只返回其中的文本内容:

It works for me, try it:

function changePosition () {
   let aliquam = document.querySelector('.aliquam-span');
   let aliquamAbsolute = document.querySelector('.red-text').parentElement;
   let aliquamRect = aliquam.getBoundingClientRect();
        
   aliquamAbsolute.style.top = aliquamRect.top + 'px';
   aliquamAbsolute.style.right = aliquamRect.right + 'px';
   aliquamAbsolute.style.left = aliquamRect.left + 'px';
   aliquamAbsolute.style.bottom = aliquamRect.bottom + 'px';
}
window.onresize = changePosition;
window.onload = changePosition;
.container {
  width: 100%;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

p {
  font-size: 1.5rem;
}

.wrap {
  
}

.absolute {
  position: absolute;
  inset: 0; 
}

.red-text {
  position: relative;
  color: red;
  left: '200px';
  margin: 0;
}

.aliquam-span {
  color: blue;
}
<div class="container">
  <div class="wrap">
    <p>Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. <span class="aliquam-span">Aliquam</span> eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.</p>
    <div class="absolute">
      <p class="red-text">Aliquam</p>
    </div>
  </div>  
</div>
英文:

It works for me, try it:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

function changePosition () {
   let aliquam = document.querySelector(&#39;.aliquam-span&#39;);
   let aliquamAbsolute = document.querySelector(&#39;.red-text&#39;).parentElement;
   let aliquamRect = aliquam.getBoundingClientRect();
        
   aliquamAbsolute.style.top = aliquamRect.top + &#39;px&#39;;
   aliquamAbsolute.style.right = aliquamRect.right + &#39;px&#39;;
   aliquamAbsolute.style.left = aliquamRect.left + &#39;px&#39;;
   aliquamAbsolute.style.bottom = aliquamRect.bottom + &#39;px&#39;;

}
window.onresize = changePosition;
window.onload = changePosition;

<!-- language: lang-css -->

.container {
  width: 100%;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

p {
  font-size: 1.5rem;
}

.wrap {
  
}

.absolute {
  position: absolute;
  inset: 0; 
}

.red-text {
  position: relative;
  color: red;
  left: &#39;200px&#39;;
  margin: 0;
}

.aliquam-span {
  color: blue;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;wrap&quot;&gt;
    &lt;p&gt;Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. &lt;span class=&quot;aliquam-span&quot;&gt;Aliquam&lt;/span&gt; eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.&lt;/p&gt;
    &lt;div class=&quot;absolute&quot;&gt;
      &lt;p class=&quot;red-text&quot;&gt;Aliquam&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

你应该选择被设置为绝对定位的 div,所以选择 .absolute 而不是 .red-text

    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;wrap&quot;&gt;
        &lt;p&gt;Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. &lt;span class=&quot;aliquam-span&quot;&gt;Aliquam&lt;/span&gt; eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.&lt;/p&gt;
        &lt;div class=&quot;absolute&quot;&gt;
          &lt;p class=&quot;red-text&quot;&gt;Aliquam&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        
    &lt;/div&gt;
英文:

You should target the div that is being set as the absolutely positioned one. So select .absolute instead of the .red-text.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let aliquam = document.querySelector(&#39;.aliquam-span&#39;)
let aliquamAbsolute = document.querySelector(&#39;.absolute&#39;)

let aliquamRect = aliquam.getBoundingClientRect()
let aliquamAbsoluteRect = aliquamAbsolute.getBoundingClientRect()

let xOffset = aliquamRect.left - aliquamAbsoluteRect.left

let yOffset = aliquamRect.top - aliquamAbsoluteRect.top

console.log({xOffset, yOffset})

aliquamAbsolute.style.left = `${xOffset}px`
aliquamAbsolute.style.top = `${yOffset}px`

<!-- language: lang-css -->

.container {
  width: 100%;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

p {
  font-size: 1.5rem;
}

.wrap {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;
}

.red-text {
  color: red;
  margin: 0;
}

.aliquam-span {
  color: blue;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;wrap&quot;&gt;
    &lt;p&gt;Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. &lt;span class=&quot;aliquam-span&quot;&gt;Aliquam&lt;/span&gt; eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.&lt;/p&gt;
    &lt;div class=&quot;absolute&quot;&gt;
      &lt;p class=&quot;red-text&quot;&gt;Aliquam&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    
&lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

GSAP 的团队在这方面帮助了我!

这里有三个不同的答案:

https://greensock.com/forums/topic/35705-tracking-position-of-a-text-span-with-javascript/

英文:

The folks at GSAP helped me out on this one!

Three different answers here:

https://greensock.com/forums/topic/35705-tracking-position-of-a-text-span-with-javascript/

huangapple
  • 本文由 发表于 2023年2月10日 14:24:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/75407599.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定