How can I change css stylesheet with dart?


Tags: html,css,dart,dart-polymer

Problem :

I'm working on a project for an exam and I need to change the stylesheet's name in the page. How can I do this with Dart? I've seen that I can edit every attribute of my css from Dart but I've already made others css that I would like to use in my page. For example, I have this in my html page:

<link href="stile.css" rel="stylesheet" type="text/css">

I need to edit the page to make this

<link href="stile-blu.css" rel="stylesheet" type="text/css">

How can I do this?



Solution :

Assuming your <link ...> element is in the <head> element

document.querySelector('#button').onClick.listen((_) {
  var stile = document.head.querySelector('link[href="stile.css"]');
  stile.attributes['href'] = 'stile-blu.css';
});

If you add an id attribute to your link element the selector can be simplified

<link id="mystyle" href="stile.css" rel="stylesheet" type="text/css"> 
document.querySelector('#button').onClick.listen((_) {
  var stile = document.head.querySelector('#mystyle');
  stile.attributes['href'] = 'stile-blu.css';
});

    CSS Howto..

    How do you change the modal link color in Foundation?

    How to trim off Image in CSS?

    How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

    How to dynamically positioning html table by using css properties?

    Bootstrap 4 and user details - how to do the “bootstrap” or correct way?

    How do you set a div's location to be centered when we don't know the screen size?

    How to get css and django working on live server

    How do I change the z-index of a div when the user mouses over it?

    Should be easy jQuery loop, but can't seem to figure out how to cycle through this

    How to embed css to HTML in laravel?

    How to change horizontal block-level elements to vertical elements after specific width?

    How to apply this sidebar to all pages using CSS?

    How do I swap triangle icons when doing expanding/collapsing divs with Javascript/CSS

    How to recalculate the css url paths when moving it to a different folder

    How do I remove the underline from an image wrapped in an anchor?

    How do I set the width of inputs within a column in Twitter Bootstrap's grid system?

    How to apply SVG so that it works in IE background image

    Simple Form button submit doesn't show in IE 8-7

    How to use conditional CSS for IE browser in drupal6?

    how to override theme in primefaces on Dialog window and set user define CSS

    how to load a css for Safari only?

    How to create slanted tabs with a border in CSS? [duplicate]

    How can Shake FilePatterns be used to minify JS and CSS files?

    CSS: How can I force a display: table-cell box to have a fixed width of 50%?

    How can I center the table in the page?

    How to call a image class on a regular interval

    How can you configure Rails to use blueprint-css instead of the default scaffolding css?

    CSS how to auto adjust width img tag

    How do I know when is the right moment to stop using a specific css vendor-prefix?

    Show Feed in two columns in HTML