0

我正在开发一个插件，帮助设计师/前端开发人员为设计中的不同元素选择颜色。我不想详述知道。主要思想是，他们在 html 正文中插入一个 javascript 文件，该脚本将在页面上创建一种工具栏。我希望这个工具栏出现在屏幕的左侧，但不与页面上的现有元素重叠。所以（可能）我必须将整个身体向右移动 N 像素（如果工具栏是 N 像素宽）。

这是一个半生不熟的演示：http: //jsbin.com/ifizal/2/edit

基本上我为正文设置了左边距。假设页面上没有元素，它工作正常position: absolute。如果有，设计就会被破坏。那么如何将整个身体向右移动，包括定位的元素absolute？

欢迎任何其他方法，主要问题是：

将工具栏放置在屏幕左侧（N 像素宽），但不与现有页面元素重叠。

4

3 回答 3

2

创建元素，将其作为第一个元素附加到正文中，并将 margin-left 添加到正文。

演示：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;  
}

香草 Javascript

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 回答
1

您可以将所有页面内容添加到具有 css 相对位置的 DIV 中。然后移动那个 DIV。在该 DIV 内具有绝对位置的元素相对于其位置 /margins。

于 2013-03-06T09:48:19.620 回答
1

这个想法有很多具体的问题，但我认为最大的问题是工具栏将始终包含在正文中 - 因此正文的任何​​特殊定位也会移动工具栏。

例如...

body {
    position: relative;
    left: 60px;
}

将移动工具栏和页面的其余部分。

您可能需要考虑在其余内容周围放置一个 div 并相对定位。我假设您遇到了这个问题，因为您不能只更改页面 HTML 以合并工具栏？

您可以使用 javascript 来完成所有这些 - 获取正文的 HTML 内容，添加工具栏和 div，然后将原始正文内容添加到 div 中。

于 2013-03-06T09:48:34.400 回答