我有一个包含几个css文件的网页。我正在尝试构建一个jquery弹出框，我可以在其中自定义字体，大小，间距等。我设计了弹出框，只是省略了实现。任何人都可以指导我们如何执行此操作，是否有任何jquery代码集发送到自定义css属性并覆盖以前的值。
$(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>
我知道代码有点乱。对不起。
答案 0 :(得分：2)
您可以将css应用为对象。所以你可以在你的javascript中定义你的对象：
var my_css_class = { backgroundColor : 'blue', color : '#fff' };
然后将其应用于您想要的所有元素：
$("#myelement").css(my_css_class);
您可以将此功能重复用于其他对象......
答案 1 :(得分：0)
要设置指定的CSS属性，请使用以下语法：
css("propertyname","value");
要设置多个CSS属性，请使用以下语法：
css({"propertyname":"value","propertyname":"value",...});
答案 2 :(得分：0)
您可以通过jQuery以两种方式添加css
将css添加到元素
$（＆＃39; css_selecttor＆＃39;）。css（＆＃39; css_property＆＃39;：＆＃39; property_value＆＃39;，＆＃39; css_property＆＃39;：＆＃39; property_value＆＃ 39）;
通过添加css中定义的类意味着您可以通过jquery添加用css文件编写的类
$（＆＃39; your_element＆＃39）。addClass（＆＃39; css_class_name＆＃39）;