ホームページ > 記事 > ウェブフロントエンド > 幅を0として表示するマジックコード? _html/css_WEB-ITnose
幅を0として表示するマジックコード? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:36:241343ブラウズ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script language="javascript" type="text/javascript"> function showMsg(){ document.getElementById("textfield").value=document.getElementById("textfield").width;} </script></head><body> <input type="submit" name="Submit" value="提交"id="Submit" onclick="showMsg()" /> <input type="text" style="width:100px;" id="textfield" name="textfield" /></body></html> コードを直接 HTML コードに変換して実行すると、幅が 0 と表示されます。これはどういう説明ですか? ... ).width
--》
document.getElementById("textfield").style.widthこのとき、数字の 100 ではなく 100px が表示されます。
function showMsg(){ var x=document.getElementById("textfield").style.width; var y=x.split("px"); document.getElementById("textfield").value=y[0];} function showMsg(){ var x=document.getElementById("textfield").style.width; var y=x.split("px"); document.getElementById("textfield").value=y[0];}
もちろん、文字列をカットする方法は知っていますが、問題は、結局のところ、2 番目の方法ではスタイルを直接取得できるのに、なぜそれが出力されるのかということです。 0として?
function showMsg(){ var x=document.getElementById("textfield").style.width; var y=x.split("px"); document.getElementById("textfield").value=y[0];}
もちろん、文字列をカットする方法は知っていますが、問題は、結局のところ、2 番目の方法では、幅をネイティブ インターフェイスで直接取得できるのに、なぜ次のように出力されるのかということです。 0?
書いてあることが間違っているので、上の階の @zpjshiwo77 さんから正しい書き方を教えていただきました、 document.getElementById("textfield").style.width
の取得方法です。
document.getElementById("textfield").width
--》
このとき、数字の 100 ではなく 100px が表示されます。
parseInt(document.getElementById("textfield").style.width);
動作するかどうか見てみましょう
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。