Mithril - 2.3 - Hyperscript - DOM attributes

In this example below you will see how to do a Mithril - 2.3 - Hyperscript - DOM attributes with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MasqueradeCircus, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MasqueradeCircus ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mithril - 2.3 - Hyperscript - DOM attributes</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://masquerade-circus.github.io/pure-material-css/css/pure-material.css'>

  
  
</head>

<body>

  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/mithril/1.0.0-rc.3/mithril.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/MasqueradeCircus/mithril-23-hyperscript-dom-attributes-aBBYYo */

m.render(document.body, m('article', [
/**
 * Mithril uses both the Javascript API and the DOM API (setAttribute) to resolve attributes. 
 * This means you can use both syntaxes to refer to attributes.
 */
m("input", { readonly: true, value: 'readonly' }), // lowercase
m("input", { readOnly: true, value: 'readOnly' }), // uppercase
m("input[readonly][value='readonly']"), m("input[readOnly][value='readOnly]"),

/**
 * Mithril supports both strings and objects as valid style values. 
 * In other words, all of the following are supported:
 */
m("label", { style: "background:red;" }, 'Red'), m("label", { style: { background: "red" } }, 'Red'), m("label[style=background:red]", 'Red')]));

Comments