HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>standby — dynamic property</title>

  <style>

    body {

      font-family: system-ui, sans-serif;

      margin: 0;

      padding: 1.5rem;

      background: #f8fafc;

      color: #334155;

      line-height: 1.7;

    }

    h1 { margin: 0 0 1rem; font-size: 1.25rem; color: #0f172a; }

    object {

      width: 280px;

      height: 100px;

      border: 1px solid #cbd5e1;

      border-radius: 6px;

      display: block;

      margin-bottom: 1rem;

      background: #fff;

    }

    button {

      font: inherit;

      padding: 0.45rem 0.9rem;

      border: 1px solid #cbd5e1;

      border-radius: 6px;

      background: #fff;

      cursor: pointer;

    }

    #status {

      margin-top: 0.75rem;

      font-size: 0.875rem;

      color: #475569;

    }

    code { background: #e2e8f0; padding: 0.1rem 0.35rem; border-radius: 4px; }

  </style>

</head>

<body>

  <h1>Dynamic standby</h1>

  <object

    id="demoObject"

    data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='100'%3E%3Crect fill='%23e0e7ff' width='280' height='100'/%3E%3Ctext x='140' y='58' text-anchor='middle' fill='%233730a3' font-family='system-ui' font-size='13'%3EDemo object%3C/text%3E%3C/svg%3E"

    type="image/svg+xml"

    standby="Initial standby text"

  ></object>

  <button type="button" id="updateBtn">Change standby text</button>

  <p id="status">Current standby: <code>Initial standby text</code></p>

  <script>

    var obj = document.getElementById("demoObject");

    var status = document.getElementById("status");

    document.getElementById("updateBtn").addEventListener("click", function () {

      obj.standby = "Fetching new resource...";

      status.innerHTML = "Current standby: <code>" + obj.standby + "</code>";

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML standby Attribute — Set object.standby in JavaScript