topic04.html

---
next_text: Accessing MEI attributes
next_id: topic05
---

<h3>Accessing MEI elements</h3>

<p>
   This example shows how Verovio can load the score at a given point, depending on the id of an element. The selected element always being displayed, even when zooming or resizing the window.
</p>

{% highlight javascript %}
////////////////////////////////////////////////
/* An id of a chord element in the file below */
////////////////////////////////////////////////
id = "chord-L1186F7";
{% endhighlight %}

<p>
   [More information]
</p>

{% highlight javascript %}
//////////////////////////////////////////////////////////////////////
/* A function that loads the page where the id is and highlights it */
//////////////////////////////////////////////////////////////////////
function loadPage() {
    var elementPage = vrvToolkit.getPageWithElement(id);
    if (elementPage == 0) {
        console.log("ID not found");
    }
    else {
        page = elementPage;
    }

    var svg = vrvToolkit.renderToSVG(page, {});
    $("#svg_output").html(svg);

    ///////////////////////////
    /* Highlight the element */
    ///////////////////////////
    $("#" + id).attr("fill", "#f00").attr("stroke", "#f00");
};
{% endhighlight %}

<p>
   Note that highlighting is just added for clarity, it's not mandatory for this feature.
</p>

{% include html-tutorial.html id="code1" file="topic04-access.html" %}
<div id="code1-xml" style="display: none">
{% highlight html %}
{% include_relative gh-tutorial/topic04-access.html %}
{% endhighlight %}
</div>

<div class="pull-right">
    <p><a href="./tutorial.xhtml?id={{ page.next_id }}">{{ page.next_text }}</a> →</p>
</div>