z-indexの最大値を取得

2010/08/03
JavaScript(ActionScriptもか)使ってるとレイヤーの重なりって結構面倒だったりする。 実行順を把握していないと、各要素の重なりがわけわかめになったり・・・ と言うわけで、HTML(CSS)内のz-indexの最大値を取得して変更するスクリプトが必要 ここのソースをほぼそのまま使ってみる。 [Javascript] z-indexの最も大きい値を取ってくる

サンプルコード


function topZIndex(id) {
    $(id).css('z-index', getMaxZIndex() + 1);
}

var getMaxZIndex = function(){
    var largestZIndex = 0; 
    var defaultView = document.defaultView;
    var func = function(tagname){
        var elements = document.getElementsByTagName(tagname);
        for (var i=0; i< elements.length; i++){
            var element = elements[i];
            var zIndex = element.style.zIndex;
            if (!zIndex) {
                var css = element.currentStyle || defaultView.getComputedStyle(element, null);
                zIndex = css ? css.zIndex : 0;
            }
            zIndex -= 0;
            if(largestZIndex < zIndex) largestZIndex=zIndex;
        }
    };
    if(arguments.length == 0) {
        func('*');
    } else {
        for(var i=0; i<arguments.length; i++) {
            func(arguments[i]);
        }
    }
    return largestZIndex;
};
ただこれだと、z-indexがアクションごとに無限に増加してしまうので改良の余地あり。
Cloud9 を起動する -初心者編-
gcloud で GCEインスタンスを起動してみる
AWS CLI と jq でインスタンス一覧を整形して表示
React と Laravel7 のプロジェクトを作成する
Homebrewインストール-2020年版
3直線で囲まれた範囲塗りつぶし
PuLP で線形最適化問題を解く
カスタムのペジネーションを作る
node-sass を使って sass をコンパイルする
Log ファサードでSQLログを分離して書き出す
いちから始める Docker - 複数のコンテナを使う - (2020年)
いちから始める Docker - docker-compose を使う - (2020年)
AWS ECR を使ってみる
Laravel7 でマルチ認証
Mac に AWS Client を設定する
Laravel 7 リリース
v-html でHTML表示する
Laravel で Vue コンポーネントを使う
Laravel で Nuxt.js を使ってみる(Docker環境)
いちから始める Docker -コンテナをビルド- (2020年)
いちから始める Docker -起動してみる- (2020年)
Mac で MySQL(8系)
composer で vendor がインストールできない
Eloquent の日付を Carbon で扱う
webpack 4 入門(npm編)
[Mac]容量を減らす
DIコンテナはじめ
freee SDKを Laravel で使ってみる
freee API を使ってみる
Segueを利用しない画面遷移
Xcode11.3 で XVim2 を利用する
Codable で JSONを読み込み
Webpack入門(yarn編)
MacからLaradock PostgreSQLで接続エラー
Dockerで不要なコンテナ・イメージを削除
Mac で Laradock の構築
Composer インストール
yarn インストール&プロジェクト作成
Laravel 6.x 構築(Homestead編)
nvm インストール
npm install が Mac でエラー
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
DI(依存性注入)
[Ubuntu]Let's Encryptで無料の証明書を利用する
[Apache]Apache2.4のアクセス制限が変更
[Ubuntu]rootのログインとsudo権限追加
タミヤ マイコンロボット工作セットをMacに接続してみた
pgAdimn4 でブラウザで開けなくなる
Java8 を HomebrewとjEnvで構築
Android Studio環境構築 2019