質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1531閲覧

[JavaScript,DOM]ウインドウの端で文章を折り返させたい

okina25

総合スコア7

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/03/11 23:13

###前提・実現したいこと
プログラム初心者で、独学のため、目標がないとモチベが持ちません。
そこで、Chromeを使っている時にウインドウを左に寄せると文章の端が見切れることがあるので、ウインドウの端で文章が折り返す様なブックマークレットを作りたいと思いました。

###発生している問題・エラーメッセージ
以下がChromeのコンソール画面に出ているエラーメッセージになります。
Uncaught TypeError: Cannot read property 'style' of null

###ソースコード
言語はJavaScriptです。
ソースコード
(function(){
var elem = document.getElementById(prompt("idを入力してください"));

resize(); function resize() { elem.style.width = window.innerWidth; }

})()

###補足情報(言語/FW/ツール等のバージョンなど)
Chromeのバージョン 49.0.2623.87 m

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

elem.style.widthは単位がなければなりません。
https://jsfiddle.net/9j83ee56/2/

JavaScript

1(function(){ 2 var elem = document.getElementById(prompt("idを入力してください")); 3 4 resize(); 5 6 function resize() { 7 if (!elem) { 8 alert('elem is null'); 9 } else { 10 elem.style.width = window.innerWidth + 'px'; 11 } 12 } 13})();

Re: Spinoza さん

投稿2016/03/12 01:42

編集2016/03/12 01:59
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

okina25

2016/03/12 03:04

お教えいただいた方法で幅はいじれたのですが、スクロールバーも幅に含んでしまい、少し文字が隠れてしまいます。この場合、スクロールバーの幅を先に window.innerWidth から引いておくしか方法は無いのでしょうか?
guest

0

elem が null になっているので resize 関数の中で null の style プロパティを読み取れないとエラーになっています

javascript

1document.getElementById(prompt("idを入力してください"))

で入力した id が間違っていたのだと思います

resize 関数をする前に if 文で elem が null だった場合に 「id が見つかりません」と表示するなどしてみてはどうでしょう

投稿2016/03/12 01:18

ryls-nmm

総合スコア633

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

okina25

2016/03/12 02:58 編集

回答ありがとうございました。 書き忘れていたのですが、idはChromeのJavaScriptコンソールのところのElementsからコピーしていたので、存在します。 こちらの不完全な質問で誤解を招きましたこと、お詫びいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問