How to add id attribute or override style attribute in html5


I’m trying to use a blend mode for an image in openfl/html5 dom.

For now, it’s not working from code for html5 but I’m able to add a blend mode using my html debugger, so I guess it’s possible someway.
For example, I’ve added a blend mode by adding mix-blend-mode: multiply; in the style attribute of my img tag.

So here is my questions :

  • can I add from OpenFL an id attribute or a class attribute? I would be able to have my blend mode working by adding a css file.

  • can I override from OpenFL the style attribute of my bitmap ? I would be able to add my css into it to have my blend mode working.


Is this DOM, or canvas? Is there a way we could support standard blendMode behavior using this (or something similar)?

It’s DOM.
Yes, it’s possible to support blendMode adding mix-blend-mode: multiply; in the css style of the tag. At least, it worked with the img tag.

I’ve been setting custom attributes on textfields from haxe like this:

var style:String = "";
style += addStyle('position', 'absolute');
style += addStyle('z-index', index);
style += addStyle('border', border);
setStyle(textfield, style);
function setStyle(target:Dynamic, style)
     target.setAttribute("style", style);
private function addStyle(type:String, value:Dynamic):String
        return type + ':' + value + '; ';

however I was using canvas and textfields created like this;

var tf = untyped document.createElement("input");
tf.setAttribute("type", "text");

Perhaps you could use a DOMSprite of your creation, add the other objects to it. That might be an easy/clean way of integrating custom CSS around other objects :slight_smile: