0

私は、デザイナー/フロントエンド開発者がデザインのさまざまな要素の色を選択するのに役立つプラグインに取り組んでいます。詳細は知りたくありません。主なアイデアは、HTML本文にjavascriptファイルを挿入し、そのスクリプトがページ上に一種のツールバーを作成することです。このツールバーを画面の左側に表示したいのですが、ページ上の既存の要素と重ならないようにします。したがって、（おそらく）全身を右にNピクセル移動する必要があります（ツールバーの幅がNピクセルの場合）。

これは中途半端なデモです：http： //jsbin.com/ifizal/2/edit

基本的にはボディの左マージンを設定します。ページ上に要素がないと仮定すると、正常に機能しposition: absoluteます。ある場合、デザインが壊れます。では、配置された要素を含め、全身を右に移動するにはどうすればよいabsoluteですか？

他のアプローチは歓迎されます、主な問題はこれです：

画面の左側（幅Nピクセル）にツールバーを配置しますが、既存のページ要素と重なることはありません。

4

3 に答える 3

2

要素を作成し、それをbodyの最初の要素として追加し、margin-leftをbodyに追加します。

デモ： http： //jsbin.com/ifizal/3/edit

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="placeHolder"></div>
  Hello world!
  <br/><br/>
  <button onclick="javascript:addToolbar();">addToolbar</button>
</body>
</html>

CSS

html, body
{
    height: 100%;
}


body {
  background: #fff;
  margin: 0;  
}

#toolbar {
  position: absolute;
  background: #f6f6f6;   
  width: 60px;
  height: 100%;  
  left: 0;
  top: 0;
}

#placeHolder{
  display: none;  
}

バニラジャバスクリプト

function addToolbar(){

  var bodyz = document.getElementsByTagName('body')[0];

  var placeHolder = document.getElementById("placeHolder");

  var toolbar = document.createElement('div');
  toolbar.setAttribute('id','toolbar');
  toolbar.innerHTML = 'Toolbar';  
  bodyz.insertBefore(toolbar, placeHolder);

  bodyz.style.marginLeft = "60px";
}
于 2013-03-06T09:57:19.883 に答える