Javascript Girl
  1. Javascript Girl
  3. Dessin en croix CSS avec jquery
Intereting Posts
Cercle de remplissage avec des hexagones Définir la variable Session en utilisant javascript Pourquoi cette requête renvoie-t-elle tous les résultats de la requête et pas seulement ceux qui correspondent au nom de l'utilisateur? Laisser le Javascript terminé avant de rendre le pdf dans ABC pdf Comment associer une parenthèse d'entrée avec une expression régulière en JavaScript? JQuery UI – appeler Highlight / Error Comment puis-je filtrer angular ng-repeat pour utiliser des plages de dates? Téléchargement de plusieurs fichiers avec data-downloadurl Parenthèses autonomes en javascript Créer un menu UL imbriqué en fonction de la structure du chemin d'accès URL des éléments de menu Formulaire submit – Accès IE refusé – même domaine Certaines URL peuvent-elles être exemptées de CSRF dans sails.js? Comprendre l'OOP de Javascript: instances modifiant d'autres instances IBM Worklight 6.1 – Comment afficher une boîte de dialogue rapide? GetIntersectionList à partir d'un d3.js html

Dessin en croix CSS avec jquery

Quelqu'un peut-il m'aider à dessiner la forme Cross ( + ) en utilisant le code jquery? Je ne veux pas utiliser de styles CSS. Vous souhaitez ajouter tout le style CSS via jquery comme le code ci-dessous. 

$(symbol).css({ "width": options.ShapeSize.width, "height": options.ShapeSize.height, "border-style": "solid", "background-color": options.Style.Color, "border-color": options.Style.BorderColor, "border-width": options.Style.BorderWidth, });

Je veux cette forme en utilisant jquery uniquement. Exemple jsfiddle

transform:rotate(...deg) utilisation transform:rotate(...deg) 

 #cross { width: 100px; height: 100px; position: relative; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

OU

Utilisez ce jQuery et ajoutez d'autres propriétés css comme celle-ci 

 $("#cross").css({width: "100px", height: "100px", position: "relative" })

DEMO

Démo mise à jour