change style using JavaScript

Question

change style using JavaScript

Navigation

#1 by (0 votes)

0

good day, I have a design and I want to fit the styles from my database. I am learning now and I do not know how to accommodate the js so that I can make the change for example, I have the color # e81863 in the style and I want it to be the one that I select in the database, for example # e81717.this would be the one I have in the database.

This would be the part of the style that changes. here is pink

/*============= Global ancher link color style ==========*/
a {
  color:#e81863;
}
a:hover, a:active {
  color:#e81863;
  text-decoration:underline;
}
a.invarseColor:link, a.invarseColor:visited {
  color:#666;
}
a.invarseColor:hover, a.invarseColor:active {
  color:#e81863;
  text-decoration:none;
}
a.active:link, a.active:visited {
  color:#e81863;
  cursor:default;
}

/*=================== dropdown =============*/
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  background:#e81863;
  background-color:#e81863;
  filter:#e81863;
}
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
  background:#e81863;
  background-color:#e81863;
  filter: #e81863;
}

/*==================== navbar =================*/
.navbar .nav > li:hover {
  background:#e81863;
}
/* active link */
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus,
.navbar .nav > .active > a i,
.navbar .nav > .active > a:focus i,
.navbar .nav > .active > a:hover i,
.navbar .nav > .active > a span,
.navbar .nav > .active > a:focus span,
.navbar .nav > .active > a:hover span {
  background: #e81863;
  background-color: #e81863;
  filter:#e81863;
}
/* nested ul */
.navbar .nav div {
  background: #e81863;
}

/*========== btn-primary (orange-btn) ==========*/
.btn-primary {
  border:1px solid #e81863;
  background: #e81863;
background: -moz-linear-gradient(top, #e8407f 0%, #e81863 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8407f), color-stop(100%,#e81863));
background: -webkit-linear-gradient(top, #e8407f 0%,#e81863 100%);
background: -o-linear-gradient(top, #e8407f 0%,#e81863 100%);
background: -ms-linear-gradient(top, #e8407f 0%,#e81863 100%);
background: linear-gradient(to bottom, #e8407f 0%,#e81863 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8407f', endColorstr='#e81863',GradientType=0 );
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  background: #e81863;
}
.btn-primary:active,
.btn-primary.active {
  background-color: #e8407f;
}

here it changes to blue

/*============= Global ancher link color style ==========*/
a {
  color:#0069b4;
}
a:hover, a:active {
  color:#0069b4;
  text-decoration:underline;
}
a.invarseColor:link, a.invarseColor:visited {
  color:#666;
}
a.invarseColor:hover, a.invarseColor:active {
  color:#0069b4;
  text-decoration:none;
}
a.active:link, a.active:visited {
  color:#0069b4;
  cursor:default;
}

/*=================== dropdown =============*/
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  background:#0069b4;
  background-color:#0069b4;
  filter:#0069b4;
}
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
  background:#0069b4;
  background-color:#0069b4;
  filter: #0069b4;
}

/*==================== navbar =================*/
.navbar .nav > li:hover {
  background:#2374b2;
}
/* active link */
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus,
.navbar .nav > .active > a i,
.navbar .nav > .active > a:focus i,
.navbar .nav > .active > a:hover i,
.navbar .nav > .active > a span,
.navbar .nav > .active > a:focus span,
.navbar .nav > .active > a:hover span {
  background: #2374b2;
  background-color: #2374b2;
  filter:#2374b2;
}
/* nested ul */
.navbar .nav div {
  background: #2374b2;
}


/*========== btn-primary (blue-btn) ==========*/
.btn-primary {
  border:1px solid #2374B2;
  background: #2989d8;
  background: -moz-linear-gradient(top, #2989d8 0%, #2374b2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2989d8), color-stop(100%,#2374b2));
  background: -webkit-linear-gradient(top, #2989d8 0%,#2374b2 100%);
  background: -o-linear-gradient(top, #2989d8 0%,#2374b2 100%);
  background: -ms-linear-gradient(top, #2989d8 0%,#2374b2 100%);
  background: linear-gradient(to bottom, #2989d8 0%,#2374b2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2374b2',GradientType=0 );
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  background: #2374B2;
}
.btn-primary:active,
.btn-primary.active {
  background-color: #2989d8;
}

Now I want to change it from my database and this is the code that I use to bring the color of the database, which is not how to use the data of the styles in the code.

   $.ajax({

        url:"ajax/plantilla.ajax.php",
        success:function(respuesta){

            var Estilocolor = JSON.parse(respuesta).Estilocolor;


            $(".backColor, .backColor a").css({"background": Estilocolor,
                                                "color": colorTexto})


        }


    })

This is the example I have and it works well but I do not know how to accommodate the styles that I already have in the ccs with this js

javascript ajax ccs

asked by Julio Serrata 18.09.2018 в 19:49

source

1 answer

How can I write a file to create and write a .txt file with the records of a table of a bd with php? Error uploading .war to apache tomcat

score 0 · Answer 1

a tip, handles the colors as css classes that will make the data look cleaner leaving the ugly part to css, in your css you could add

.rojo{
background-color:#ff0000;
}
.azul{
background-color:#0000ff;
}

in the database you could say that you want to change the theme from blue to red and in your js you could put something like this

    $.ajax({
            url:"ajax/plantilla.ajax.php",
            success:function(respuesta){
                var data=JSON.parse(respuesta);
                var Estilocolor = data.Estilocolor;
                $(".backColor, .backColor a").addClass(Estilocolor);
            }
        })

It is easier and cleaner to work with classes and add or remove them from your objects than to modify the style with .css ({}) from jquery.