Как изменить цвет границы изображения во время onBeforeDrag?

У меня есть элемент html img с исходным атрибутом. Как изменить цвет границы изображения при перетаскивании?

<image src='" + "#src#" + "' height='185' width='150' />

ниже мое событие onBeforeDrag.

$$("imageList").attachEvent("onBeforeDrag", function (context, ev) {
    if (ev.target.currentSrc != null) {
        //var imagepath = ev.target.currentSrc;
        document.getElementsByTagName('img').css = "myborder";
        console.log(document.getElementsByTagName('img'));
    }
});

CSS:

 .myborder {
    background:#D652D9;
    padding:12px;
    border:1px solid #999; }

person Shakeer Hussain    schedule 15.10.2018    source источник
comment
для тех, кому интересно, onBeforeDrag – это пользовательское событие в наборе инструментов Webix UI Toolkit и DHX UI Toolkit.   -  person Randy Casburn    schedule 16.10.2018


Ответы (1)


document.getElementsByTagName() возвращает объект, содержащий набор элементов. Таким образом, .css не является свойством этого объекта, а также не является свойством каждого из объектов в этой коллекции. Кажется, вы хотите присвоить элементу имя класса css. Вы делаете это с .classList.add().

Чтобы исправить эту часть, я рекомендую вам использовать document.querySelectorAll(), потому что он возвращает другой тип коллекции, называемый NodeList. Причина, по которой это изменение важно, заключается в том, что оно имеет метод forEach(). Итак, вы можете сделать это:

document.querySelectorAll('img').forEach(i=>i.classList.add("myborder"));

Этот фрагмент кода назначит имя класса css «myborder» каждому изображению на странице.

person Randy Casburn    schedule 15.10.2018