11528 sujets

JavaScript, DOM et API Web HTML5

Inserer puis desactiver un lien dans le head

Bonjour

Afin d'afficher le contour des blocks, j'ai une feuille de style à cet effet (assets/css/display-blocks.css) que je voudrais activer ponctuellement via un bouton et jquery

<script>
			$(document).ready(function(){
				$("#display-blocks").click(function(){
					$('head').append('<link href="assets/css/display.css" />');
					//$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'assets/css/display-layouts.css'));
					
				});
			});
		</script>

Mais aucune des deux lignes ne fonctionne.
Et ensuite lorsque je voudrai désactiver l'affichage, je pensais à :

<script>
			$(document).ready(function(){
				$("#display-blocks").click(function(){
					$('link[href="assets/css/display-layouts.css"]').remove();
				});
			});
		</script>

Modifié par cpalo (13 Dec 2021 - 16:44)
Salut,

tu peux facilement activer/désactiver les link avec l'attribut disabled :

//STOP : 
document.querySelectorAll('link[rel="stylesheet"]')[0].disabled=true;
// OK : 
document.querySelectorAll('link[rel="stylesheet"]')[0].disabled=false;
par defaut, la feuille de style assets/css/display.css n'est pas activée.
C'est pour cela que je ne l'ai pas insérée dans le <head>.
Je pensais qu'avec jquery , un click sur un bouton me permettrait de la copier dans le <head> et donc de l'activer.
Et un autre click de la faire disparaître.
Cela m'a l'air plus simple que tu la mettes par défaut avec l'attribut disabled ... Je ne comprends pas pourquoi tu rajoutes cette feuille de style via du javascript plutôt que directement en dur dans le code de ta page Smiley ohwell

Ensuite en javascript tu n'as plus qu'a switch le disabled de true ou false en fonction du click sur le bouton que tu veux.
C'est une feuille de style qui ne figure pas dans le site "fini".
Elle ne sert qu'au moment du développement pour afficher les grilles et les blocks.
Jusqu'à maintenant je le faisais "manuellement" en commentant ou non la ligne d'appel de la feuille.
Comme j'arrive à la fin, je souhaitais ajouter un bouton qui sur le site fini en front-end permettrait ou non d'afficher ces grilles et blocks.
Par rapport à ton code, je ne souhaite activer/desactiver qu'une seule feuille de style (href="assets/css/display-layouts.css) .
Et elle doit être désactivée par défaut.
Avec ce genre de code?

$('link[rel=stylesheet href="assets/css/display-layouts.css"]').attr('disabled', 'false');

Modifié par cpalo (13 Dec 2021 - 16:51)
Si tu la met en dur avec l'attribut disabled elle ne "figurera" pas dans le site "fini". Cela la désactive du coup c'est invisible.
Ensuite tu n'as plus qu'à faire un bouton qui bascule la valeur disabled entre true et false.

Enfin bon cela devrait aussi fonctionner en l'ajoutant et la supprimant à la volet avec ton code aussi je pense. Tu obtiens quoi comme erreur exactement avec ton premier code ?
Parce que ton code ne m'a pas l'air faux en fait Smiley sweatdrop (il doit juste manquait le rel="stylesheet" dans ta première ligne..)
J'ai l'impression qu'il y a eu un edit entre temps :
Du coup pour répondre à ta question si tu ne veux pas le mettre directement en dur dans ton code, en javascript tu peux le append directement avec le disabled : 


$(document).ready(function(){
    $('head').append('<link rel="stylesheet" href="assets/css/display.css" disabled />');
});
Je suis pas trop au point en jquery, mais bon, petit exemple qui m'a l'air de fonctionner :
https://jsfiddle.net/qwyz04rL/

Du coup en fonction de la présence ou pas de disabled on l'ajoute ou on l’enlève

Edit : Et j'ai eu des bugs a cause des noms de fichiers que je n'ai pas copier coller au même endroit :
assets/css/display.css
vs
assets/css/display-layouts.css
Modifié par Mathieuu (13 Dec 2021 - 17:34)
Oups.. toutes mes excuses pour l'erreur de copier coller.. j'utilisais deux documents differents pour tester.

Mais ma préférence va pour la feuille de style déjà insérée avec disabled. 

$(document).ready(function(){
    $("#display_blocks").click(function(){
        $('link[rel="stylesheet" href="assets/css/display.css"]').attr('disabled', 'false');
    });					
});

Mais ça ne fonctionne pas

Par contre ton code sur le jsfiddle fonctionne.
Modifié par cpalo (13 Dec 2021 - 18:36)
J'ai un bouton de lien dans un <td> que je dois désactiver. Cela fonctionne sur IE mais ne fonctionne pas dans Firefox et Chrome. La structure est - Lien à l'intérieur d'un <td>. Je ne peux pas ajouter de conteneur dans le <td> https://instasave.onl/

J'ai essayé tout ce qui suit mais ne fonctionne pas sur Firefox (en utilisant 1.4.2 js):

$(td).children().each(function () {
$(this).attr('désactivé', 'désactivé');
});


$(td).children().attr('désactivé', 'désactivé');

$(td).children().attr('désactivé', vrai);

$(td).children().attr('disabled', 'true');
Modifié par dracosvid (21 Dec 2021 - 09:33)
Sujet clos
Aller à