JavaScriptのDOMノードのテキストオーバーフロープロパティを確認する方法

Question

DOMノードにtext-overflowのellipsisと等しいCSSプロパティがあるかどうかを確認しようとしています。私はnode.text-overflowをしようとすると、私は

が未定義

のプロパティ「テキスト」を読み取ることができませんエラーを取得し、私はまたnode.textOverflowを試してみました。私は何を確認すべきですか？

Answer 1

ノードのCSSプロパティにアクセスするためには、styleプロパティを使用してアクセスする必要があります。さもなければあなたは正しい考えを持っていました。

if(node.style.textOverflow == "ellipsis") 

CSSプロパティのJavascript構文は、W3Schoolsにあります。

Answer 2

"text-overflow"は変数名にすることはできません（javascriptでは名前に " - "が付いた変数は使用できません）ので、node.style.textOverflowを試してみてください。また、すでにjQueryをインストールしている場合は、オブジェクトのプロパティを取得するために、$(object).css('text-overflow') === 'ellipsis'

Answer 3

を試してみてください。プロパティの名前は、より低いラクダのケースです。この場合、node.style.textOverflow

これはプロパティ値を設定するのに便利ですが、検索にはあまり役に立ちません。あなたは上記を使用する場合でも、あなたはまだ取得しますobject.styleを介してアクセスしたときに、ほとんどの要素は、その属性のすべてを示していないので、これは未定義

の

プロパティを読み取ることができませんtextOverflow 。

たとえば、div要素をとります。これはデフォルトの表示スタイルのブロックを持ちますが、スタイルを使ってそれにアクセスすると空の値になります。それを表示するには

、我々はそれが、この方法は、IE8以前に使用できないことに注意することが重要ですgetPropertyValue

とともにgetComputedStyleを使用することができます。

Window.getComputedStyle（）メソッドは、アクティブなスタイルシートを適用し、それらの値に含まれる基本的な計算を解決した後、要素のすべてのCSSプロパティの値を返します。

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

var par = document.getElementById("par"); 
 
var overflowStyle = document.getElementById("overflow-style"); 
 

 
var style = getComputedStyle(par).getPropertyValue("text-overflow"); 
 

 
overflowStyle.innerHTML = style;

#par { 
 
    text-overflow: ellipsis; 
 
    max-width: 150px; 
 
}

<p id="par">This is a really long paragraph</p> 
 

 
<p id="overflow-style"></p>

また、これらのスタックオーバーフローの記事を見てみましょう

Get a CSS value with JavaScript

object.style.x doesn't return anything