23

javascriptでスタイルプロパティを変更した後、スタイルシートの値(単位を含む)に戻す方法を考えています。

以下の例では、出力をでは100pxなく (CSS の値) として読みたいと思います。10pxgetComputedStyle

また、ダミーの div を に保持するtop:25pxため、プロパティを削除しても機能しstyleません。

私が持っている最善の方法は、ノードのクローンを作成し、高さを読み取ってプロパティ ( http://jsfiddle.net/daneastwell/zHMvh/4/ ) に格納することですが、これは実際にはブラウザーのデフォルトの css 値を取得していません (特にこれがsで設定em)。

http://jsfiddle.net/daneastwell/zHMvh/1/

<style>
 #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>  

<script>
  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    elem.style.left = "10px";
    elem.style.top = "25px";
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("left");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
</script>
4

3 に答える 3

30

元のスタイルシートにフォールバックするインライン スタイルをクリアするだけです。

elem.style.left = null;
于 2012-05-22T09:15:02.610 に答える
5

スタイル オブジェクトには組み込みメソッドがあるため、次のremoveProperty()ようなことができます。

elem.style.removeProperty('left');

私の知る限り、これはabaelter が提案しnullたように、プロパティを に設定するのとまったく同じ効果があります。完全を期すために含める価値があると思っただけです。

于 2014-11-30T23:08:03.880 に答える
1

abaelterの回答とhttp://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/を組み合わせると、次の関数が得られます。

var getCssStyle = function(elementId, cssProperty) {
  var elem = document.getElementById(elementId);
  var inlineCssValue = elem.style[cssProperty];

  // If the inline style exists remove it, so we have access to the original CSS
  if (inlineCssValue !== "") {
    elem.style[cssProperty] = null;
  }

  var cssValue = "";
  // For most browsers
  if (document.defaultView && document.defaultView.getComputedStyle) {
    cssValue = document.defaultView.getComputedStyle(elem, "").getPropertyValue(cssProperty);
  }
  // For IE except 5
  else if (elem.currentStyle){
    cssProperty = cssProperty.replace(/\-(\w)/g, function (strMatch, p1) {
      return p1.toUpperCase();
    });
    cssValue = elem.currentStyle[cssProperty];
  }

  // Put the inline style back if it had one originally
  if (inlineCssValue !== "") {
    elem.style[cssProperty] = inlineCssValue;
  }

  return cssValue;
}

サンプルコードを配置してテストします。

console.log("getCssStyle: " + getCssStyle("elem-container", "left"));

元のCSSgetCssStyle: 100px値を確認できるようにします。値を元に戻したいだけの場合は、abaelterが言うように、null元に戻したいCSS値を実行します。

于 2012-05-22T17:57:50.877 に答える