• 締切済み

このコードを処理速度向上させることはできますか？

このコードを処理速度向上させることはできますか？ <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ function className(str){ var alltag = document.getElementsByTagName("*"); var ary = []; for(var i=0;i<alltag.length;i++){ if("."+alltag[i].className == str){ ary.push(alltag[i]); } } return ary; } window.$ = function(str){ var ID = str.match(/^#(\w+)/), CLASS = str.match(/^\.(\w+)/), TAG = str.match(/^(\w+)|(\*)/), node = str.match(/^doc/)? document: TAG? document.getElementsByTagName(RegExp.$1==""?RegExp.$2:RegExp.$1): ID? document.getElementById(RegExp.$1): CLASS? navigator.appVersion.toLowerCase().indexOf("msie")? className(str): document.getElementsByClassName(RegExp.$1): null; this.style = function(css){ css = css.split(/\:|\;/); if(ID){ for(var j=0;j<css.length;j++) node.style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; }else{ for(var i=0;i<node.length;i++){ for(var j=0;j<css.length;j++) node[i].style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; } } } return this; } window.onload = function(){ var st = new Date().getTime(); for(var i=0;i<10000;i++){ $('#wrap').style("color:#00f; background:#f00; border-left:10px solid #000;"); $('div').style("border-right:10px solid #000; width:100px; height:100px; margin:10px;"); $('.cl').style("border-top:10px solid #000; background:#00f;"); } var end = new Date().getTime(); alert(end-st); } //]]> </script> <title></title> </head> <body> <div id="wrap">aaaaa</div> <div class="cl">bbb</div> <div class="cl">ccc</div> </body> </html> 他にも、もっとこうしたほうが…等ありましたら教えてください。どうか宜しくお願いします。

みんなの回答

回答No.12

えぇ～～　その stock ！　ベンチマークぶっ壊しの「落ち」だったのに！

  • 15mm
  • ベストアンサー率65% (65/100)
回答No.11

ブラウザの再描画を減らそう、ということで、<style>の中を弄って一括で。 望む動作と違うかもしれませんし、 ブラウザごとの仕様の違いへの対応とかがまだ途中ですが、参考までにどうぞ。 （ところでちゃんと速くなってるのか？ 短くはなってるけど） babu_babooさんのstockのアイデア頂きました。 var $=(function(){ 　var c = document.styleSheets[0], stock = {}; 　return function(s){ 　　this.style = function( css ){var _ 　　　if(_ = stock[s]){_.style.cssText += ";" + css;return} 　　　var r = c.cssRules || c.rules, 　　　　i = r.length, 　　　　S = s.toUpperCase() 　　　while(i--)if(s==r[i].selectorText || S==r[i].selectorText){ 　　　　(stock[s] = r[i]).style.cssText += ";" + css; return} 　　　c.insertRule? 　　　　c.insertRule(s + "{" + css + "}", c.cssRules.length ): 　　　　c.cssText += s + "{" + css + "}" 　　}; 　　return this 　} })(); 読みづらいコードで申し訳ない・・・。整形なんて久しくしてないもので・・・ 「insertRuleの引数が面倒。なんでIEはcssTextの要素名が大文字なんだ？」 ってとこの片付けがまだです。 ・このコードを埋め込む<script>タグよりも前に、<style>が少なくとも１つ必要です。 　ダミーでいいので<style type="text/css"></style>だけでＯＫ ・$().style()以外の用途が無いこと前提です。ごめんなさい。 ・「-cssText は解析範囲が多いので遅い。」が気になるところですが、よくわからなかったので無視。 ・エスケープや$とかの指摘は、「処理速度向上」という目的外なので、質問者にお任せ。（逃げただけ？）

  • think49
  • ベストアンサー率59% (285/482)
回答No.10

#3,4,9です。 #9でUnicodeエスケープに関するURLを貼り切れなかったので補足を。 今更気が付きましたが、バックスラッシュでもエスケープできるようですね。(Unicodeの方が網羅できる文字種は多いですが) http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#escaped-characters http://hp.vector.co.jp/authors/VA022006/css/syntax.html#escaped-characters

  • think49
  • ベストアンサー率59% (285/482)
回答No.9

一つサンプルコードを書いてみたんですが、長すぎて書ききれなかったのでアドバイスに留めます。 実は私自身が気が付かなかったようなことも他で指摘されまして、その件も含めると大変長くなるので箇条書きにさせていただきます。 ------- - CSSにタグの機構は存在しないので、TAGという名前は望ましくない。適切な名前候補はtype_selector, element_name (CSS2.1仕様の文法規則より)など。 CSS2.1 (W3C) http://www.w3.org/TR/CSS21/syndata#tokenization http://www.w3.org/TR/CSS21/grammar.html CSS2 (Japanese) http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#tokenization http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/grammar.html - CLASSという名前も好ましくない。(小文字の) class は「ECMA-262 3rd Edition」で将来の予約語として定義されており、IE8でエラーが発生する。JavaScriptは大文字小文字を区別するため、CLASSは大丈夫なようだが避けた方が無難と思われる。 7 字句について (Lexical Convention) http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/7_Lexical_Conventions.html#section-7.5.3 - IE7-では、Array#push は a[a.length] = elm; より数倍遅い。 Script雑感: javascript：遅い push も使い方次第？ http://zombiebook.seesaa.net/article/146326121.html - IE7- には getElementsByTagName('*') でコメントノードも拾うバグがある。nodeTypeをチェックしよう。 - function className(str) の名前は望ましくない。 - function className(str) で引き渡せる値はUnicodeエスケープするか正当性検査を行った方がよい。 - cssText は解析範囲が多いので遅い。 - cssText に渡す値はUnicodeエスケープするか、正当性検査すべき。 - もし、querySelectorAll() を使うのならば、関数名を getElementsByClassName() にすべきではない。ネイティブな getElementsByClassName() は生きた(live)ノードリストを返すので名前と機能が一致しない。 - $ の変数名は好ましくない。「ドル記号は機械的に生成されるコード中のみの使用を意図される。(ECMA-262 3rd Editionより)」 7 字句について (Lexical Convention) http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/7_Lexical_Conventions.html#section-7.6 ------- ものすごい長いですが、まあじっくりと取り組んでみてください。 特にIE7-のバグ関係は対応した方がよいと思います。 Array#push は条件付きコンパイルを利用して、IE7- だけ a[a.length] = elm; な処理に書き換える、という方法が思いつきましたが、そこまでしなくても必要なところで分岐させるだけでいいかも。 cssText の問題は先に挙げたように多岐にわたるので、いっそのことライブラリに渡す方法を変えた方がスマートかもしれません。 例えば、 foo('.test').style({color:'red', backgroundColor: '#fee', border: 'solid 1px #ccc'}); とか。このやり方なら、element.style.property に代入するのも容易でしょう。 for～inを使う場合は、prototypeを拾わないように注意してください。 hasOwnProperty - MDC https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/Object/hasOwnProperty

回答No.8

さ・さ・さ・更に！ className の関数の名前もダメ！　適当なのに変えて！ あぁ～～～。

回答No.7

再々投稿！ごめんなさい。指摘うけて訂正します。 「無駄に回答が多い」から、「無駄な回答が多い」になってしまった。 window.onload のあとに、 var className = (function ( mode ) { 　var alltag = document.getElementsByTagName( '*' ); 　var stock = [ ]; 　return function ( css ) { 　　if( 2 == mode ) { 　　　var tmp = stock[ css ]; 　　　if( tmp ) return tmp; 　　} 　　 　　var cnt = 0; 　　var tag; 　　var result = [ ]; 　　 　　while( tag = alltag[ cnt++ ] ) 　　　if( tag.className == css ) 　　　　result[ result.length ] = tag; 　　 　　if( result.length ) { 　　　if( 2 == mode ) 　　　　stock[ css ] = result; 　　　return result; 　　} 　　return null; 　}; })(2);

回答No.6

れんとう！おばかぶりはっき！さいそくじゃねぇ？ var className = (function ( mode ) { 　var alltag = document.getElementsByTagName( '*' ); 　var stock = [ ]; 　 　if( mode ) { 　　var i = 0, t, result = [ ]; 　　while( t = alltag[ i++ ] ) 　　　result[ result.length ] = t; 　　 　　alltag = result; 　　result = null; 　} 　return function ( css ) { 　　if( 2 == mode ) { 　　　var tmp = stock[ css ]; 　　　if( tmp ) return tmp; 　　} 　　 　　var cnt = 0; 　　var tag; 　　var result = [ ]; 　　 　　while( tag = alltag[ cnt++ ] ) 　　　if( tag.className == css ) 　　　　result[ result.length ] = tag; 　　 　　if( result.length ) { 　　　if( 2 == mode ) 　　　　stock[ css ] = result; 　　　return result; 　　} 　　return null; 　}; })(2);

回答No.5

さいしょにことわっておきます。$() はすすめませんよ！ でも、おあそびとして、こんなのをかいてみた！ className() です！　でも、そくどてきには、びりょうか？ ぜんかくくうはくは、はんかくにしてちょ！ var className = (function ( mode ) { 　var alltag = document.getElementsByTagName( '*' ); 　 　if( mode ) { 　　var i = 0, t, result = [ ]; 　　while( t = alltag[ i++ ] ) 　　　result[ result.length ] = t; 　　 　　alltag = result; 　　result = null; 　} 　return function ( css ) { 　　var cnt = 0; 　　var tag; 　　var result = [ ]; 　　 　　while( tag = alltag[ cnt++ ] ) 　　　if( tag.className == css ) 　　　　result[ result.length ] = tag; 　　 　　return result.length ? result: null; 　}; })(true);

  • think49
  • ベストアンサー率59% (285/482)
回答No.4

#3です。 #3の一例としてあげたコードですが、try～catch でも良かったですね。 (全角空白は半角空白に置換してください) --------- function getElementsByClassName(elm, className){ 　var result; 　try { 　　return elm.querySelectorAll('.'+className); 　} catch(e) { 　　elm = elm.getElementsByTagName('*'); 　　// 処理 　　return result; 　} } --------- 構造化プログラミング(一つの入口と一つの出口)的に書くなら、以下のような形でしょうか。 --------- function getElementsByClassName(elm, className){ // 一つの入り口 　var result; 　try { 　　result = elm.querySelectorAll('.'+className); 　} catch(e) { 　　result = []; 　　elm = elm.getElementsByTagName('*'); 　　// 処理 　} 　return result; // 一つの出口 } --------- > 「RegExpはグローバグオブジェクトなので使用すべきではない」と私は教わりました。 これは「グローバルオブジェクト」に訂正します。

  • think49
  • ベストアンサー率59% (285/482)
回答No.3

処理速度…。確かに、興味ある分野ではあります。 > function className(str){ ネイティブ関数がある場合は、ネイティブ関数を利用した方が高速になります。 IE6等のバージョンの低いブラウザを考慮するなら、関数オブジェクトが定義済みかどうか調べて処理を分けてみてください。 以下は一例です。(全角空白を半角空白に置換してください) ------- var doc = this.document, 　　result, elm; if('undefined' !== typeof doc.querySelectorAll){ 　result = doc.querySelectorAll('.foo'); } else { 　elm = doc.getElementsByTagName('*'); } ------- document.getElementsByClassName - MDC https://developer.mozilla.org/ja/DOM/document.getElementsByClassName document.querySelectorAll - MDC https://developer.mozilla.org/en/DOM/Document.querySelectorAll document.evaluate - MDC https://developer.mozilla.org/en/DOM/document.evaluate 生きている(live)ノードが欲しいなら、getElementsByClassName() を使い、 生きていない(non-live)ノードで欲しければ、querySelectorAll(), evaluate() を使います。 一般には、生きていないノードの方が高速です。 querySelectorAll() は IE8 から対応しますが、getElementsByClassName() はIE8でも対応しないので注意してください。 evaluate() については、amachangさんが作成されたライブラリがあるのでクロスブラウザは簡単ですが、勉強のためなら使わない方が無難だと思います。 W3C DOM Compatibility - Core http://www.quirksmode.org/dom/w3c_core.html 詳細は書ききれないので、キーワードを元にGoogle検索してください。 > if("."+alltag[i].className == str){ <div class="foo hoge"> の時に対応できません。 この手のコードは getElementsByClassName でGoogle検索すればいくつかのサンプルが手に入りますが、高速化を目指すなら正規表現を使わないようにしてみて下さい。 高速なgetElementsByClassName - 素人がプログラミングを勉強するブログ http://d.hatena.ne.jp/javascripter/20080805/1217912008 > document.getElementsByTagName(RegExp.$1==""?RegExp.$2:RegExp.$1): 「RegExpはグローバグオブジェクトなので使用すべきではない」と私は教わりました。 RegExp.$1 は、match() なら返り値で配列として受け取れます。 > for(var j=0; j<css.length; j++) for文で length を毎回評価するのは効率が良くないので、 for(var j=0,m=css.length; j<m; j++) のようにしてみてください。 > css = css.split(/\:|\;/); わざわざ、splitを使ってまで node.style.property に値を代入するよりは、node.style.cssText に代入した方が簡単ではないでしょうか。 また、この書き方では、content: ";" とか a[title=";"] に誤爆してしまいます…。 style.cssText の使い処に関する考察 - IT戦記 http://d.hatena.ne.jp/amachang/20070730/1185788557 > if(ID){ 「単一ノード or ノードリスト」で処理を分けるぐらいなら、単一ノードも配列の要素として、for文でループさせた方がシンプルに出来ると思います。 実際、jquery.js も prototype.js もそうしています。

3104kita
質問者

補足

お二人ともどうもありがとうございます。 自分の力量では理解できない内容も多く含まれているので、ちょっとお礼を付けるのが遅くなってしまうと思います。しっかり読んで、最終的にはお礼もつけさせて頂きます。すみません。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • このコードは何をやっているのか

    data[i]には0～20位の数値が適当に入っている感じです function create(){ text += (data[i]+10).toString(31).toUpperCase(); while (text.match(/(\D)\1{8}/)) { text = text.replace(/(\D)\1{8}/,RegExp.$1+'9'); } while (text.match(/(\D)\1{7}/)) { text = text.replace(/(\D)\1{7}/,RegExp.$1+'8'); } while (text.match(/(\D)\1{6}/)) { text = text.replace(/(\D)\1{6}/,RegExp.$1+'7'); } while (text.match(/(\D)\1{5}/)) { text = text.replace(/(\D)\1{5}/,RegExp.$1+'6'); } while (text.match(/(\D)\1{4}/)) { text = text.replace(/(\D)\1{4}/,RegExp.$1+'5'); } while (text.match(/(\D)\1{3}/)) { text = text.replace(/(\D)\1{3}/,RegExp.$1+'4'); } while (text.match(/(\D)\1{2}/)) { text = text.replace(/(\D)\1{2}/,RegExp.$1+'3'); } while (text.match(/(\D)\1/)) { text = text.replace(/(\D)\1/,RegExp.$1+'2'); } } function load(text){ text = text.substring(text.indexOf("0")+1); while (text.match(/(\D)([2-9])/)) { text = text.replace(/(\D)([2-9])/,load2(RegExp.$1,RegExp.$2)) } j=1; for(i=0;i<text.length;i++) { cdata[j] = "ABCDEFGHIJKLMNOPQRSTU".indexOf(text.charAt(i)); j=j+1; } } function load2(arg1,arg2) { code = arg1; for (i=1;i<arg2;i++) { code += arg1; } return code; } 数値配列の圧縮とデコードをしているようですが 主に正規表現のあたりがどういう事をやっているのかが理解出来ません

  • テキストノードを非表示にできません

    いつもお世話になります。 <div id="ida"> <div>aaaaaaaaaaaa</div> </div> のとき、 elemDiv=document.getElementById("ida"); var nodes=elemDiv.childNodes; for(i=0;i<nodes.length;i++) { 　　var node=nodes[i]; 　　if(node.nodeName.toLowerCase()=='div'){ 　　　　node.style.display='none' 　　} } とすれば、<div>aaaaaaaaaaaa</div> は、表示されなくなります。 ここで、 <div id="ida"> aaaaaaaaaaaa </div> として、つまり文字列を<div>で囲まないようにして for(i=0;i<nodes.length;i++) { 　　var node=nodes[i]; 　　if(node.nodeName=='#text'){ 　　　　node.style.display='none' 　　} } とすると、「aaaaaaaaaa」が非表示となりません。 テキストノード自体を非表示にすることはできないのでしょうか。 よろしくお願いいたします。

  • 同じ i 番目のclassを連動させることはできますか？

    お世話になります <script type="text/javascript"><!-- window.onload = function() { document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } obj0 = document.getElementsByClassName("id"); obj1 = document.getElementsByClassName("pass"); for(i=0;i<obj0.length;i++) { obj0[i].onclick = function() { obj1[i].style.display = "block"; } } } //--></script> <style type="text/css"><!-- .id { width:150px; float:left; cursor:pointer; } .pass { display:none; } .pass0 { width:100px; } --></style> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass0"> <input type="button" name="login" value="LOG IN" class="login"> </div> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass"> <input type="button" name="login" value="LOG IN" class="login"> </div> のような感じでclass("id")[0]をクリックしたらclass("pass")[0]を表示、class("id")[1]をクリックしたらclass("pass")[1]を表示・・・というふうにしたいのですがなかなかうまくいきません＞＜ 名前とパス両方を入力にしてやる方法もできますし、 それぞれのclass("id")にfunction()を振って obj0[0].onclick = function() { obj1[0].style.display = "block"; } obj0[1].onclick = function() { obj1[1].style.display = "block"; } のようなやり方もできるのはできます 後者のやり方は他の部分でもいろいろ使っているので記事やメンバーが増えるたびに新たに追加していかないといけないので***.onclick = function() { } を配列にするなどまとめてできる方法があれば教えていただきたいのですが＾＾；

  • すいません、このタグですが、自動で始まるようにならないでしょうか？

    <title>１行づつ画面上に出力する</title> <STYLE type="text/css"> <!-- div{font-size:20pt; } --> </STYLE> <script Language="JavaScript"><!-- str = new Array(); str[0] = "Sample text...(^^)/<br>"; str[1] = "１行づつ表示します。<br>"; str[2] = "By KaZuhiro FuRuhata<br>"; str[3] = "<a href='http://www.shiojiri.ne.jp/~openspc/'>OpenSpace</a>"; count = 0; function setTextLine() { if (count >= str.length) return; txt = ""; count++; for (i=0; i<count; i++) txt += str[i]; if (document.all) document.all["outText"].innerHTML = txt; setTimeout("setTextLine()",1000); } // --></script> </head> <body> <DIV id="outText" style="position:absolute;top : 167px;left : 112px;"></DIV> <DIV style="width : 139px;height : 76px;top : 10px;left : 146px; position : absolute; z-index : 1; " id="Layer1"><a href="javaScript:setTextLine()">出力開始</a></DIV> </body>

  • JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。

    JavaScript初心者です。 URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいんですが。。 URLに含まれる文字列を名前にもつidのスタイル変更については解決したのですが、同様のことclassでもやりたいと考えています。 例えばURLの末尾が /index.html?AAA&BBB となっている場合、非表示だったAAAとBBBのdivを表示するということをやりたいです。 ソースは以下になります。 前半でURLの末尾を取得して、後半でclassのスタイルを書き換えているつもりです。それぞれでは動作するんですが、あわせると動作しません。自分はかなり初心者ですので、根本的な誤りがあるかもしれませんが、ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- .AAA,.BBB,.CCC { width:200px; background-color:#ccc; margin:10px; display:none; } --> </style> <script language=javascript> <!-- function changeStyle(){ var query = window.location.search.substring(1); var search = query.split("&"); for (var i = 0; i < search.length; i++) { var XXX = search[i]; } var allElement = document.getElementsByTagName('*'); for (var j = 0; j < allElement.length; j++) { if (allElement[j].className=='XXX') { allElement[j].style.display = "block"; } } } --> </script> </head> <body onload=changeStyle();> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> </body> </html>

  • 正規表現をまとめることってできますか？

    正規表現をまとめるにはどうしたらよいでしょうか？ var str = document.forms[0].school_list.value; if (str == "") return; var result = ""; for (var i = 0; i < str.length; i++) result = str.replace(/,/g,'\n'); document.forms[0].result_school_list.value = result; document.forms[0].result_school_list.select(); var str = document.forms[0].result_school_list.value; if (str == "") return; var result = ""; for (var i = 0; i < str.length; i++) result = str.replace(/、/g,'\n'); document.forms[0].result_school_list.value = result; document.forms[0].result_school_list.select();

  • htmlファイルでするとできるのにcgiファイルでするとできないのはなぜでしょう？

    お世話になります <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>com</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"><!-- window.onload=function() { document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } obj = document.getElementsByClassName("trans_e"); for(i=0;i<obj.length;i++) { l = obj[i].innerHTML; obj[i].style.width = l + "px"; } } //--></script> <style type="text/css"><!-- .trans_a { float:left; width:20px; } .trans_b { float:left; width:100px; } .trans_c { margin-top:10px; } .trans_d { float:left; width:200px; } .trans_e { background-color:red; margin-bottom:2px; } --></style> </head> <body> <div> <div class="trans_a">&nbsp;</div> <div class="trans_b"><img src="./img/non.png" alt="$shuzoku"> <div class="trans_c">$type</div></div> <div class="trans_d"> <div class="trans_e">41</div> <div class="trans_e">40</div> <div class="trans_e">47</div> <div class="trans_e">35</div> <div class="trans_e">22</div> <div class="trans_e">11</div> </div> </div> </body> </html> このようにclass="trans_e"のところをその中に書かれている数値で幅を可変させようとしているのですがhtmlファイルで試すと思ったようなことをしてくれるのですがcgiファイルに組み込むと幅が100％のまま変わらないのですが解決策をご存知の方いらっしゃいますでしょうか？ getElementByIdですればできるのですが結構数があるものですので・・・－－；

  • このタグはグラデーションですが、文字が小さくて困っています。

    <html> <head> <title>文字にグラデーションをかけ１文字ずつ出力する</title> <script Language="JavaScript"><!-- str = "■■■■■■■■■■■■■■■■■■■■■■■■■■"; count = 0; function setText1() { if (count > str.length) return; count++; txt = str.substring(0,count); txt2 = gradTextConv(txt); if (document.all) document.all["outText"].innerHTML = txt2; if (document.layers) { document.layers["outText"].document.open(); document.layers["outText"].document.write(txt2); document.layers["outText"].document.close(); } setTimeout("setText1()",100); } function gradTextConv(sText) { p = 16 / str.length; str2 = ""; for (i=0; i<sText.length; i++) { pt = Math.floor(p*i); n = "0123456789ABCDEF".charAt(pt); c = "#"+n+n+"0000"; str2 = str2 + "<font color='"+c+"'>" + sText.charAt(i) + "</font>"; } return str2; } // --></script> </head> <body bgcolor="white" onload="setText1()"> <div id="outText" style="position:absolute;top:50px;left:5px;"></div> </body> </html>

    • ベストアンサー
    • HTML
  • BOXがロールオーバーで開閉するインターフェース

    よろしくお願いします。 javascript初心者です。 今WEBサイトを構築してして BOXがロールオーバーで開閉するインターフェースを作りたくて 本を買って勉強しているのですがうまく動作しません。。 HTMLは ーーーーーーーーーーーーーーーーーーーーーーーーー <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type"content="text/css"/> <meta http-equiv="Content-Script-Type"content="text/javascript"/> <title>テスト</title> <link href="css/1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java/java.js"></script> </head> <body> <body onload="boxMove()"> <div id="mybox1"class="box" style="top:0px;left:0px;"></div> <div id="mybox2"class="box" style="top:0px;left:250px;"></div> <div id="mybox3"class="box" style="top:0px;left:500px;"></div> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー CSS ----------- .box{ position:absolute; width:250px; height:200px; } #mybox1{ background-color:#FF9900; } #mybox2{ background-color:#BBEE55; } #mybox3{ background-color:#AAEEFF; } body{ color:#FFFFFF; margin:0; padding:0; overflow:hidden; } javascript --------------------------------- var myTarget=700; var speed=2; function myboxCmove(){ var myPos = eval(document.getElementById('mybox2').style. left.replace("px","")); myPos += (myTargetC-myPos)/speed; document.getElementById('mybox2').style.left = myPos+"px"; setTimeout("myboxCmove()",10); } function myboxRmove(){ var myPos = eval(document.getElementById('mybox3').style. left.replace("px","")); myPos += (myTargetR-myPos)/speed; document.getElementById('mybox3').style.left = myPos+"px"; setTimeout("myboxRmove()",10); } var pageWidth; var pageHeight; function setTarget1(){ myTargetC = pageWidth-100; mytargetR = pageWidth-50; } function setTarget2(){ myTargetC = 50; mytargetR = pageWidth-50; } function setTarget3(){ myTargetC = 50; mytargetR = 100; } function config(){ if(document.all){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = window.innerWidth; pageHeight = window.innerHeight; } myTargetC = pageWidth/3; myTargetR = pageWidth/3*2; document.getElementById('mybox1').style.width = (pageWidth-100)+"px"; document.getElementById('mybox1').style.height = (pageHeight-100)+"px"; document.getElementById('mybox2').style.width = (pageWidth-100)+"px"; document.getElementById('mybox2').style.height = (pageHeight-100)+"px"; document.getElementById('mybox3').style.width = (pageWidth-100)+"px"; document.getElementById('mybox3').style.height = (pageHeight-100)+"px"; } <body onload="config();myboxCmove();myboxRmove();"onresize="config()"> <div id="mybox1" class="box" style="top:0px; left:0px;" onmouseover="setTarget1()"></div> <div id="mybox2" class="box" style="top:0px; left:250px;" onmouseover="setTarget2()"></div> <div id="mybox3" class="box" style="top:0px; left:500px;" onmouseover="setTarget3()"></div> -------------------------------------------------- テストとして本を参考にやってみたのですがなにがいけないのかまったくわかりません。どなたかご教授お願い致します。

  • javascirpt 超初心者です・・・すみません。。

    本当に初心者なんでゆるしてください。。 下記のプログラムで、マウスオーバー・アウトでスクリプトを読み込んでスタイルシートを入れ替えようとおもっていました。 ですが、機能してくれません。。 すみませんが、ご教授いただけませんでしょうか？ お願いします。。 --html---------------------------------------------------- <script type="text/javascript" src="test.js"></script> <body> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> </body> ----------------------------------------------------------- ---css---------------------------------------------------- .hare{ background:url(toumei.gif) no-repeat; width:300px; height:100px;} .ame{ background:url(toumei2.gif) no-repeat; width:300px; height:100px;} ----------------------------------------------------------- ---javascript----------------------------------------------- window.onload = function(){ var hai = document.getElementsByTagName("div"); for (var i=0; i<=hai.length-1; i++){ hai.item(i).onmouseover = function(){ hai.item(i).className="ame"; } hai.item(i).onmouseout = function(){ hai.item(i).className="hare"; } } } -----------------------------------------------------------

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する