2016-05-26 11 views
1

Я выровнял некоторый текст в элементе. Могу ли я получить позицию в пикселях смещения текста, используя JavaScript или jQuery?Получите относительное положение текста после стилизации текста с выравниванием CSS

Пример ниже:

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <p style="text-align: right; background-color:green; width: 80%;">This text is right aligned.</p> 
 
    </body> 
 
</html>

Есть ли способ узнать, сколько пикселей пространства есть перед запуском текста? Другими словами, мне нужно знать, сколько ширина в пикселях в зеленой области перед первой буквой «Этот текст ...» в приведенном выше примере.

Что еще более важно, если я перетащить браузер и изменить его ширину, могу ли я знать пространство в пикселях динамически?

ответ

0

Если вы передадите текст обертывающим элементом (внутри <p>), вы можете сделать это, сравнив offsetWidth обертки и <p>. Если текст выровнен по правому краю, любая разница в ширине должна быть пространством слева.

Чтобы проверить, что положение после того, как при изменении размера окна, слушать resize события на окне, как это сделано ниже:

// I've placed the important stuff in this function 
 
// so I can use it as an event handler 
 
function updateWidth() { 
 

 
    // Get width of the text (requires a wrapping element, such as <span>) 
 
    var innerWidth = getElement('inner').offsetWidth; 
 

 
    // Get width of surrounding <p> 
 
    var outerWidth = getElement('outer').offsetWidth; 
 

 
    // Subtract to get the amount of space on the left 
 
    var leftSpace = outerWidth - innerWidth; 
 

 
    // Output it (since I have nothing better to do) 
 
    getElement('output').innerHTML = 'left space = ' + leftSpace + 'px'; 
 

 
} 
 

 
// Update the amount of space when the window is resized 
 
window.addEventListener('resize', updateWidth); 
 

 
// Run the function once to display the amount of space 
 
// before the user has resized the window 
 
updateWidth() 
 

 

 
// Just a utility (since I'm not using jQuery) 
 
function getElement(id) { 
 
    return document.getElementById(id); 
 
};
<!-- There is a wrapping span here --> 
 
<p id="outer" style="text-align: right; background-color:green; width: 80%;"><span id="inner">This text is right aligned.</span></p> 
 

 
<!-- This is only for outputting the width --> 
 
<pre id="output"></pre>

Если есть обивка на родителе <p> и родительский элемент установлен в box-sizing: border-box, а затем вычитает количество отступов от ширины родительского элемента.

 Смежные вопросы

  • Нет связанных вопросов^_^