Search code examples
javascripthtmlcssreactjsappendchild

How to remove specific css in appendChild?

I have a drag and drop using react, it's working just fine, but the element that i am dragging on my menu has a css like this:

.objects {
    position: absolute;
    background-color: #FFF3CC;
    width: 50px; 
    height: 50px;
    margin: 10px;
    padding: 8px;
    font-size: 18px;
    text-align: center;
    cursor: move;
}

I use the position absolute to stack 10 elements and with that i can drag 10 times into my drop zone, this also works fine, but it keeps the property position:absolute, so when it renders on my drop zone it stacks again. I want to remove the css 'position' from it when i do the append:

 event.target.appendChild( this.get_id(elem_id) );

How can i remove this property so i can display them separately?

Solution

  • code for chaging css properties in javascript:

    document.getElementById("myElement").style.position = "relative";

    and just in case, the position options are:

    • static
    • relative
    • fixed
    • absolute
    • sticky