我有一个包含几个 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>我知道代码有点困惑。对此感到抱歉。
最佳答案
您可以将 css 作为对象应用。所以你可以在 JavaScript 中定义你的对象，如下所示:
var my_css_class = { backgroundColor : 'blue', color : '#fff' };
然后只需将其应用到您想要的所有元素:
$("#myelement").css(my_css_class);
您可以为其他对象重用此函数......
关于jquery - 我们如何使用 jquery 添加自定义 css？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36051612/