javascript - 抓取动态添加的内容

Question

可以在 JSBin 上查看完整代码 - http://jsbin.com/ecuraQEg/1/edit

我正在从事实验性网站设计器(所见即所得编辑器)的工作，但遇到了一些麻烦。

我希望能够通过更改其位置、背景颜色、边框、填充等来操作已绘制/附加的 div:

假设我用红色、绿色和蓝色的背景颜色绘制了 3 个 div。

当我点击红色 div 时，我希望它显示它的所有属性、高度、宽度、顶部、左侧、背景等:我已经向下设置了宽度和高度，但我似乎无法弄清楚如何捕获其他风格。

非常感谢任何帮助。

DIV 宽度/高度由以下内容获取:

canvas.onmousemove = function(e) {
    if ($('select#tools option:selected').val() !== 'select') return;

    $('#canvas div').on('mousemove', function() {
        // Detects/Shows div size on specified element.
        $('#elm-width').val($(this).width().toString() + 'px');
        $('#elm-height').val($(this).height().toString() + 'px');
    });

    document.getSelection().removeAllRanges();
    $('#canvas div.rect').draggable();
    code.val(preview.html());
    coder.val(preview.html());
};

DIV 是使用以下 JQuery/Javascript 绘制的:

setMousePosition = function(e) {
  if ($('select#tools option:selected').val() !== 'div') return;
    var ev = e || window.event; //Moz || IE
    if (ev.pageX) { //Moz
        mouse.y = ev.pageY + window.pageYOffset;
        mouse.x = ev.pageX + window.pageXOffset;
    } else if (ev.clientX) { //IE
        mouse.y = ev.clientY + document.body.scrollTop;
        mouse.x = ev.clientX + document.body.scrollLeft;
    }
};

var mouse = {
    x: 0,
    y: 0,
    startX: 0,
    startY: 0
};
var element = null;

// Mouse Event Handlers
canvas.onmousemove = function(e) {
    if ($('select#tools option:selected').val() !== 'div') return;
    setMousePosition();
    if (element !== null) {
        element.style.position = $('select#position option:selected').val();
        element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
        element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
        element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
        element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
        element.style.margin = $('#elm-margin').val();
        element.style.padding = $('#elm-padding').val();
        element.style.color = $('#elm-color').val();
        element.style.border = $('#elm-border').val();
        element.style.borderRadius = $('#elm-border-radius').val();
        element.style.MozBorderRadius = $('#elm-border-radius').val();
        element.style.background = $('#elm-bgcolor').val();
        element.style.boxShadow = $('#elm-boxshadow').val();
        element.style.textShadow = $('#elm-txtshadow').val();
        element.style.overflow = 'auto';

        $('#elm-top').val(element.style.top);
        $('#elm-left').val(element.style.left);
        $('#elm-width').val(element.style.width);
        $('#elm-height').val(element.style.height);
    }
};

canvas.onmousedown = function(e) {
    if ($('select#tools option:selected').val() !== 'div') return;
    if (element !== null) {
        element = null;
        canvas.style.cursor = "default";
        console.log("finsihed.");
    } else {
        console.log("begun.");
        mouse.startY = mouse.y;
        mouse.startX = mouse.x;
        element = document.createElement('div');
        element.className = 'rect';
        element.style.top = mouse.y + 'px';
        element.style.left = mouse.x + 'px';
        canvas.appendChild(element);
        element.appendChild(document.createTextNode($('#insidediv').val()));
        canvas.style.cursor = "crosshair";
    }
};

canvas.onmouseup = function(e) {
    if ($('select#tools option:selected').val() !== 'div') return;
    element = null;
    canvas.style.cursor = "default";
    console.log("finsihed.");
    code.val(preview.html());
    coder.val(preview.html());
    $('.select-tool').trigger('click');
};

Answer 1

使用 jQuery，您可以使用 $(element).css('property-name');

获取任何 css 属性的值

这是一个使用它的简单示例，以及使用 .offset().top 和 .offset().left 作为获取这些值的替代方法。 (这些也是 jQuery 方法):

http://jsfiddle.net/sx8B3/