• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Inline Styles

One way of using styles is to use inline styles, where you apply styles to one HTML element only. To create an inline style, you use the STYLE attribute that most HTML elements have. Here’s an example we saw in Chapter 6, “Using Core HTML Methods and Events,” (Listing 06-15.html) for the Internet Explorer, where we used inline styles to color and size a <DIV> element that we used as a drop target:

<HTML> 
    <HEAD> 
        <TITLE> 
            Dragging and Dropping Data 
        </TITLE> 

        <SCRIPT LANGUAGE="JavaScript"> 
            <!--
            function startDrag() 
            { 
                event.dataTransfer.setData("Text", 
                    "The data was passed to the target!"); 
                event.dataTransfer.effectAllowed = "copy" 
            } 

            function endDrag() 
            { 
                event.returnValue = false 
                event.dataTransfer.dropEffect = "copy" 
                droptarget.innerHTML = 
                    event.dataTransfer.getData("Text") 
            } 

            function dragOver() 
            { 
                event.returnValue = false 
                event.dataTransfer.dropEffect = "copy" 
            } 
            // -->  
        </SCRIPT> 
    </HEAD> 

    <BODY> 
        <H1>Dragging and Dropping Data</H1> 
        <IMG SRC="dragger.jpg" ondragstart="startDrag()"> 
        <DIV ID="droptarget"
					STYLE="background:pink; width:300; height:100;"
					ONDRAGENTER="dragOver()" ondrop=”endDrag()"
					ONDRAGOVER="dragOver()">
					Drop the data here... 
        </DIV> 
    </BODY> 
</HTML> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint