1. Source Code
<!DOCTYPE HTML Public"-// the//DTD XHTML 1.0 Transitional//EN" "http://www.W3.org/TR/XHTML1/DTD/xhtml1-transitional.DTD"><HTML xmlns="http://www.W3.org/1999/XHTML"><Head><Meta http-equiv="Content-type"content="text/HTML;CharSet=Utf-8"/><title>scripting controls Interactive elements</title></Head><Body><span OnClick="Span1_Click() ">footnotes</span><Details ID="DETIALS1">This page was generated on September 20, 2017</Details><Script type="text/JavaScript">//controls whether content is displayed based on attributesfunction Span1_Click(){var OBJD = document.getElementById ("detials1");var ATTD = Objd.getattribute ("open");if(ATTD! = "Open") {Objd.setattribute ("open", "open");}Else{OBJD.RemoveAttribute("Open");}} </Script></Body></HTML>
View Code
2. Page effects
2.1 Click the footnote before
2.2 Click the footnote after
In JavaScript, use the GetAttribute () method to get the "open" property of the <details> element and then determine the attribute value of the element, and when the value is "open", use the RemoveAttribute () method to delete the < The "open" property of the details> element, or vice versa, using the setattribute () method to increase the property.
"HTML5" uses scripting to control the use of the details element of the interaction element