7

重複の可能性:
JavaScript を使用して、要素の幅が固定幅かパーセンテージ幅かを判断する

要素に流動的な幅があるかどうかを知る必要があります。なぜそれが本当に必要なのか、毛むくじゃらの詳細に入ることができますが、そうではないと思います.

基本的に、要素のN%幅またはNpx|pt|em|etc幅ですか？現在、計算された現在の幅を取得する方法しかありません。したがって、要素の幅が 100% であっても、JS で値を取得する500pxと、その時点での幅のように、または幅がいくらでも返されます。

これを知るため、または元の CSS 値を取得するために、私が知らないハックや JS API はありますか?

また、jQuery は使用しないでください。これは私のJSライブラリ用です。

4

3 に答える 3

2

window.getComputedStyleそれをサポートするブラウザーと、それをサポートするブラウザーで使用する必要がありますelement.currentStyle。$(element).css('width')または、違いを抽象化する必要があるjQueryを使用できます（ただし、後者はテストしていません）.

以下は、少なくとも幅と高さではなく、私が思っていたことをしないようです。周りを検索した後、不可能であると述べられているこの他の SO の質問を見つけました(少なくともスタイルシートを解析しないと?!)。私には気が狂っているように思えます。念のため、探し続けます。

jQueryでCSSルールのパーセンテージ値を取得

if( window.getComputedStyle ) {
  value = window.getComputedStyle(element,null).width;
} else if( element.currentStyle ) {
  value = element.currentStyle.width;
}

アップデート

私はこれが機能することを発見しました...！ただし、firefoxの場合のみ:(私にとっては、要素に幅を計算するものが何もない場合(つまり、ドキュメントフローの一部ではない場合)、元の値を返す必要があることは理にかなっています:

function isElementFluid(elm){
  var clone = elm.cloneNode(false);
  if( window.getComputedStyle ) {
    value = window.getComputedStyle(clone,null).width;
  } else if( clone.currentStyle ) {
    value = clone.currentStyle.width;
  }
  return (value && String(value).indexOf('%') != -1 );
}

(IE はテストしていません)

私が FireFox の実装に同意し、Chrome や Safari に眉をひそめる例がまた 1 つあります。

更新 2

わかりました、コンピューターに負けるのが好きではありません ;) それで、この関数を思いつきました - 完全にやり過ぎですが、うまくいくようです。繰り返しになりますが、現時点では Windows マシンを持っていないため、IE でこれをテストする必要があります。元の FF のみのバージョンが非常に簡潔な場合は面倒ですが、ここでのロジックは適切です。何かが伸縮性があるかどうかをテストする際に通常の人間が行うことになります。

function isElementFluid(elm){
  var wrapper, clone = elm.cloneNode(false), ow, p1, p2;
  if( window.getComputedStyle ) {
    value = window.getComputedStyle(clone,null).width;
  } else if( clone.currentStyle ) {
    value = clone.currentStyle.width;
  }
  /// the browsers that fail to work as Firefox does
  /// return an empty width value, so here we fall back.
  if ( !value ) {
    /// remove styles that can get in the way
    clone.style.margin = '0';
    clone.style.padding = '0';
    clone.style.maxWidth = 'none';
    clone.style.minWidth = 'none';
    /// create a wrapper that we can control, my reason for
    /// using an unknown element is that it stands less chance
    /// of being affected by stylesheets - this could be improved
    /// to avoid possible erroneous results by overriding more css
    /// attributes with inline styles.
    wrapper = document.createElement('wrapper');
    wrapper.style.display = 'block';
    wrapper.style.width = '500px';
    wrapper.style.padding = '0';
    wrapper.style.margin = '0';
    wrapper.appendChild(clone);
    /// insert the element in the same location as our target
    elm.parentNode.insertBefore(wrapper,elm);
    /// store the clone's calculated width
    ow = clone.offsetWidth;
    /// change the wrapper size once more
    wrapper.style.width = '600px';
    /// if the new width is the same as before, most likely a fixed width
    if( clone.offsetWidth == ow ){
      /// tidy up
      elm.parentNode.removeChild(wrapper);
      return false;
    }
    /// otherwise, calculate the percentages each time - if they
    /// match then it's likely this is a fluid element
    else {
      p1 = Math.floor(100/500*ow);
      p2 = Math.floor(100/600*clone.offsetWidth);
      /// tidy up
      elm.parentNode.removeChild(wrapper);
      return (p1 == p2) ? Math.round(p1)+'%' : false;
    }
  }
  else {
    p1 = (value && String(value).indexOf('%') != -1);
    return p1 ? value : false;
  }
}
于 2012-10-14T09:09:09.767 に答える
1

CSS値は次の方法で取得できます。

element.style.width

これが返されます：

auto-ブラウザが幅を設定します。これはデフォルトです
length-幅を長さの単位で定義します
％-親要素の％で幅を定義します
継承-widthプロパティの値は親要素から継承されます

貼り付けられた戻り値：http ：//www.w3schools.com/jsref/prop_style_width.asp

于 2012-10-14T08:53:18.417 に答える
0

私はあなたが探しているものだと思います

getComputedStyle

IE8 以下ではサポートされていませんが、エミュレートできます。IE を参照してください: http://snipplr.com/view/13523/

于 2012-10-14T09:08:41.867 に答える