How can we add custom css with jquery?

Question

I've a webpage with couple of css files. I'm trying to build a jquery popup box where I can customize fonts, size, spacing etc. I've designed the popup box only the implementation is left out. Can anyone guide me how can we perform this action, is there any set of jquery codes which sends to custom css attributes and override the previous values.

$(function() { // DOM loaded    
       var mouseX;
       var mouseY;
       $(document).mousemove(function(f){
           mouseX = f.pageX;
           mouseY = f.pageY;
        });
       
       var openPopup = function(e) { // Function to open the popup
                $(e).fadeIn(400);
                $('#mask, .popupinfo').fadeIn(400).css({'top':mouseY, 'left':mouseX}).draggable({ containment: "body" });
                $('#mask').css({'top': 0, 'left': 0});
            };    

        var closePopup = function() { // Function to close the popup
                $('#mask, .popupinfo').fadeOut(400);
        };
       $('body').click(function(){
           $('a.open').css({'top':mouseY, 'left':mouseX}).fadeIn(400).click(function(e){
                e.preventDefault();
                var popupbox = $(this).attr('href');
                openPopup(popupbox);
               $('#editable').attr('contenteditable','true');
               
            });
       });
       $('#mask').on('click', function() {
                closePopup();
       });

            $(document).keyup(function(e) {
                if (e.keyCode == 27) {
                    closePopup();
                }
            });    
       });

 body {
        background: #e2e2e2;
        margin: 0px;
        padding: 0px;
        color: #fff;
    }

    .popupinfo {
       display: none;
        background: #e2e2e2;
        padding: 15px;
        
        float: left;
        font-size: 1.2em;
        position: fixed;
        
        width: 300px;
        margin: -100px 0 0 -100px;
        z-index: 99999;
        box-shadow: 0px 0px 4px #1852fd;
        -moz-box-shadow: 0px 0px 4px #1852fd;
        -webkit-box-shadow: 0px 0px 4px #1852fd;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    #mask {
        display: none;
        background: #9ACD32;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 88888;
        width: 100%;
        height: 100%;
        opacity: 0.2
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<body>


    <div id="mask"></div>

    <div class="clearfix">
        <a href="#popup-box" style="display: none;" class="btn btn-circle btn-sm default open">
            Open <i class="fa fa-user"></i>
        </a>
    </div>
    <div id="editable">This is the content editable where I can change fonts and edit text</div>
     <div id="popup-box" class="popupinfo" data-nitseditor="1">
         <div class="portlet box blue">
      <div class="portlet-title">
       <div class="caption">
        <i class="fa fa-gift"></i> Text Editor
       </div>
       <div class="tools">
        <a href="" class="remove">
        </a>
       </div>
      </div>
      <div class="portlet-body form">
       <form role="form">
        <div class="form-body">
         <div class="form-group">
          <label>Style Select</label>
          <div class="input-group">
           <span class="input-group-addon input-circle-left">
           <i class="fa fa-magic"></i>
           </span>
           <input type="text" class="form-control input-circle-right" placeholder="Select style">
          </div>
         </div>
                                    <div class="form-group">
          <label>Style font</label>
          <div class="input-group">
           <span class="input-group-addon input-circle-left">
           <i class="fa fa-font"></i>
           </span>
           <input type="text" class="form-control input-circle-right" placeholder="Select font">
          </div>
         </div>
                                    <div class="form-group">
                                        <div>Font Size (px)</div>
                                        <div id="slider-range-min" class="slider bg-yellow">
           </div>
                <div class="slider-value">
             Minimum Value: <span class="slider-value" id="slider-range-min-amount">
            </span>
          </div>
                                    </div>
         <div class="form-group">
          <label>Left Icon(.input-sm)</label>
          <div class="input-icon input-icon-sm">
           <i class="fa fa-bell-o"></i>
           <input type="text" class="form-control input-sm" placeholder="Left icon">
          </div>
         </div>
         <div class="form-group">
          <label>Left Icon(.input-lg)</label>
          <div class="input-icon input-icon-lg">
           <i class="fa fa-bell-o"></i>
           <input type="text" class="form-control input-lg" placeholder="Left icon">
          </div>
         </div>
         <div class="form-group">
          <label>Dropdown</label>
          <select class="form-control">
           <option>Option 1</option>
           <option>Option 2</option>
           <option>Option 3</option>
           <option>Option 4</option>
           <option>Option 5</option>
          </select>
         </div>
        </div>
       </form>
      </div>
     </div>
    </div>

    </body>

I know code is bit messy. Sorry about that.

Please add your code and what you have tried. That will be helpful for us — Rino Raj, Mar 17 '16 at 04:22
Possible duplicate of [How to change CSS using jQuery](http://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery) — Tristan Tao, Mar 17 '16 at 04:26
@Ibu shal I add css before defualt css files or after that. For example custom.css to be after bootstrap.css or before.css — Nitish Kumar, Mar 17 '16 at 04:30

score 3 · Answer 1 · edited Mar 17 '16 at 18:22

3

You can apply css as an object. So you can define your object in your javascript like this:

var my_css_class = { backgroundColor : 'blue', color : '#fff' };

And then simply apply it to all the elements you want:

$("#myelement").css(my_css_class);

You can reuse this function for other objects......

edited Mar 17 '16 at 18:22

Yass

2,658
3
13
21

answered Mar 17 '16 at 06:27

Sameera Madushanka

87
5

thanks a lot you just saved me. I was about to start tutorials on css..:) – Nitish Kumar Mar 17 '16 at 06:41
I want to store this css attributes in a file, so that it saves to the page and displays that particular set of css every time when anyone opens the webpage – Nitish Kumar Mar 17 '16 at 07:36

score 1 · Answer 2 · answered Mar 17 '16 at 04:23

1

To set a specified CSS property, use the following syntax:

css("propertyname","value");

To set multiple CSS properties, use the following syntax:

css({"propertyname":"value","propertyname":"value",...});

answered Mar 17 '16 at 04:23

Gomzy

431
4
14

Hi Gomzy, I want to store this css attributes in a file, so that it saves to the page and displays that particular set of css every time when anyone opens the webpage. – Nitish Kumar Mar 17 '16 at 04:27
ok , first of all post your code also so we can understand what you want to do – Gomzy Mar 17 '16 at 04:29

score 0 · Answer 3 · answered May 28 '16 at 19:48

You can add css by jQuery in two ways

Add css to your element

$('css_selecttor').css('css_property' : 'property_value', 'css_property' : 'property_value');
By adding class defined in css means you can add class written in css file by jquery

$('your_element').addClass('css_class_name');

How can we add custom css with jquery?

3 Answers3