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());
};

使用以下JQuery / Javascript绘制DIV：

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/

抓住动态添加的内容

1 个答案: