三章第五回 イベントオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net
三章第五回 イベントオブジェクトこのページの最終更新日：2017年11月13日 イベントオブジェクトというものが存在します。実は、イベントが発生したときはイベントオブジェクトを通してイベントの様々な情報を得ることができます。 イベントオブジェクトの取得では、そのイベントオブジェクトはどうすれば手に入るかというと、実は、addEventListenerで登録したイベントリスナの第1引数（最初の引数）に、イベントオブジェクトが渡されます。つまり、 <!doctype html> <html> <head> <title>test</title> </head> <body> <p>test</p> <script type="text/javascript"> var p = document.getElementsByTagName('p').item(0); var listener =
二章第十二回 フォームの操作 — JavaScript初級者から中級者になろう — uhyohyo.net
二章第十二回 フォームの操作このページの最終更新日：2017年9月29日 フォームについての説明は、基礎第六回にもありましたね。今回はよりDOM的な観点からフォームについて振り返ります。 HTMLFormElementform要素のHTMLElementは、HTMLFormElementと呼ばれます。 このform要素ですが、今までと同様にgetElementByIdなどで取得することも可能ですが、実は専用のものもあります。 それは、documentが持つformsというプロパティで、これはHTMLCollectionです。例えば、 <!doctype html> <html> <head> <title>test</title> </head> <body> <form id="form1" action="?"> </form> <script type="text/javascrip
タグの入れ子ルール
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSS3リファレンス
背景 background-clip …… 背景の適用範囲を指定する background-origin …… 背景の基準位置を指定する background-size …… 背景画像のサイズを指定する 角丸 border-radius …… 角丸をまとめて指定する border-top-left-radius …… 左上の角丸を指定する border-top-right-radius …… 右上の角丸を指定する border-bottom-left-radius …… 左下の角丸を指定する border-bottom-right-radius …… 右下の角丸を指定する 画像ボーダー border-image …… 画像ボーダーを指定する border-image-source …… 画像ボーダーに使用する画像ファイルを指定する border-image-slice …… ボーダー画像の
transition－CSS3リファレンス
transitionプロパティは、transition効果（時間的変化）をまとめて指定する際に使用します。 transitionプロパティでは、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の各プロパティの値を、まとめて指定することができます。 このプロパティでは、値を指定する順序が重要となります。 時間として指定される最初の値はtransition-durationに割り当てられ、 時間として指定される二番目の値はtransition-delayに割り当てられます。 複数の種類のCSSプロパティに対してtransition効果を適用する場合には、値のセットをカンマ（ , ）で区切って指定します。 ■値 各プロパティの値をスペースで区切って指定 transiti
aタグに直接style=""で:hoverをしたいしたい - OKWAVE
お世話になります。 下記のaタグのCSS記述部分を直接<a href="" style="..."として記述するには どのようにすればよいのでしょうか hoverをaタグ内に直接指定しようとしていろいろ調べたのですが、解説しているサイトを見つけられなくて、質問させてもらってます。 A:link.menu { text-decoration:none; FONT-SIZE: 12px; COLOR: #0000ff; } A:visited.menu { text-decoration:none; FONT-SIZE: 12px; COLOR: #0000ff; } A:hover.menu { FONT-SIZE: 12px; color:#0000ff; background-color:#66bce2; } A:active.menu { FONT-SIZE: 12px; COLOR:
onclickが使えるタグ - 備忘ぶ録
ふと、onclickはtableタグでも使えるのか疑問に思ったのでググってみた。 MSDNがヒットした。（怪しいことが書いてあるけど・・・） 以下のタグでonclickイベントを使用できるとの事。 ん、tableタグはOK。これで、グリッドオブジェクトが作成できる。 A, ADDRESS, APPLET, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET FONT, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, OBJECT, OL, OPTION, P,
二章第六回 木構造の操作：さまざまな機能 — JavaScript初級者から中級者になろう — uhyohyo.net
二章第六回 木構造の操作：さまざまな機能このページの最終更新日：2019年7月1日 前回、木構造の操作の基本を解説しました。他にもさまざまなメソッドがあるので、解説します。 getElementsByTagNamegetElementsByTagNameというメソッドがあります。これはdocumentやノードが持つメソッドです。これは引数に要素名を渡すと、その要素の一覧のNodeListを返します。NodeListについては、二章第三回を参照して下さい。NodeListの重要な特徴は、木構造の変化が反映されるという点です。つまり、getElementsByTagNameを呼び出してから木構造に追加された要素もNodeListに入るし、逆に木構造から除かれた要素はNodeListからも除かれます。 documentが持つgetElementsByTagNameを呼び出した場合、文書全てのノー
DOMで要素を作成・追加・削除する - Programming Field
このページでは、DOMの要素における属性(attribute)の設定方法を紹介します。 [関連キーワード: getAttribute、setAttribute、removeAttribute、getAttributeNode、setAttributeNode、removeAttributeNode、attributes、getAttributeNS、setAttributeNS] DOMでは、要素(Element)だけが「属性」を持つことが出来ます。DOM4以降では、Elementインターフェイスに「attributes」プロパティーが定義されており、このプロパティー経由で属性のリストを得ることができます。なお、DOM3まではElementの継承元であるNodeにattributesプロパティーが定義されていますが、Element以外ではnullとなります。 attributesの中身は読
setAttribute
name 値を設定する属性名を指定する文字列です。HTML 文書内の HTML 要素で setAttribute() を呼び出すと、属性名は自動的にすべて小文字に変換されます。 value 属性に割り当てる値を含む文字列です。文字列以外の値が指定された場合は、自動的に文字列に変換されます。 論理属性は要素に存在すれば true とみなされます。value には、空文字列または属性名を、前後にホワイトスペースを置かずに指定してください。実践的ななデモは以下の例を参照してください。 指定された value は文字列に変換されるため、null を指定しても必ずしも期待通りになるとは限りません。属性を削除したり、その値を null に設定する代わりに、属性の値を文字列 "null" に設定します。属性を削除したい場合は、removeAttribute()を呼び出してください。
二章第五回 木構造の操作：ノードの追加 — JavaScript初級者から中級者になろう — uhyohyo.net
二章第五回 木構造の操作：ノードの追加このページの最終更新日：2017年10月5日 今回は、前回とは逆に新しいノードを子に追加するということを解説します。 ノードを作るまず、ノードを追加するには、追加するノードを新しく作る必要があります。その方法を解説します。 createElementcreateElementというメソッドがあります。これは、要素名を指定することで、新しいHTMLElementを作って返すメソッドです。これはdocumentが持つメソッドです。つまり、次のように呼び出します。 document.createElement('p')では、次のサンプルを見てください。 <!doctype html> <html> <head> <title>test</title> </head> <body> <p id="aaaaa">t<strong>es</strong>t</p>
二章第三回 基本的な操作とテキストノード — JavaScript初級者から中級者になろう — uhyohyo.net
二章第三回 基本的な操作とテキストノードこのページの最終更新日：2017年11月10日 今回から、いよいよWebページにも多少動きが出てきます。 innerHTML前回、ちらっと「innerHTML」というプロパティが出てきました。これはHTMLElementが持っているプロパティです。 これは、要素の中身がHTMLで代入されているというものでした。 それでは、今度はそこに新しい中身を代入したらどうなるでしょう。なんと、実際に書きかわります。 <!doctype html> <html> <head> <title>test</title> </head> <body> <p id="aaaaa">t<strong>es</strong>t</p> <script type="text/javascript"> var p = document.getElementById('aaaaa'
Events
DOM2では、全ての Node がイベントを受け取る事が出来ます。 つまり、あらゆるエレメントがその対象となります。 EventTarget このインターフェイスにより、イベントの登録などを行います。 先程の説明通り、全ての Node はこのインターフェイスを持っています。 document.addEventListener("mousemove", funcMouseMove, true); function funcMouseMove(event) { ... } addEventListener(type, listener, useCapture) イベントを登録します。 type 登録するイベントの種別を決定します。 具体的な種別名は イベント一覧 参照。 listener イベント発生時に呼び出されるリスナオブジェクト名を決定します。 通常、これは関数(function)名にな
addEventListener()－JavaScript入門
HOME JavaScript入門 addEventListener() 前のページで見た方法では、同じイベントに対して処理を追加するということができません。 一番最後に指定したものが適用されます。処理を追加登録する場合は、addEventListener()を利用します。 DOM要素にイベントを指定すると上書きになる 下のサンプルをご覧下さい。HTMLのタグのonclick属性で関数fnc1を呼び出すようにしています。 そこにJavaScriptを使ってonclickイベントに関数fnc2を呼び出すよう記述しました。 果たして結果はどうなるでしょうか？ <form> <input type="button" id="ev" value="イベント発動" onclick="fnc1()"> </form> <script> var obj = document.getElementById
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS4セレクタ (Selectors Level 4) の新機能