读取课程并使用javascript或jquery应用CSS

Question

I wanna apply css with short class name with number. 我想使用带有短类名和数字的CSS。

for example, 例如，

if I use class name mt-100 , it means margin-top:100px . 如果我使用类名mt-100 ，则意味着margin-top:100px 。

if I use class name mr-200 , it means margin-right:200px . 如果我使用类名称mr-200 ，则意味着margin-right:200px 。

if I use class name mt-100 mr-200 , it means margin-top:100px and margin-right:200px . 如果我使用类名mt-100 mr-200 ，则意味着margin-top:100px和margin-right:200px 。

if I use class name pt-100 mt-100 mr-200 , it means padding-top:100px and margin-top:100px and margin-right:200px . 如果我使用类名pt-100 mt-100 mr-200 ，则表示padding-top:100px和margin-top:100px和margin-right:200px 。

I try to make it but it does not work. 我尝试使它成功，但是它不起作用。

I do not want to make every class in css like this --> .mt-100{margin-top:100} 我不想像这样在CSS中制作每个类-> .mt-100{margin-top:100}

could you help me how to do make this? 你能帮我怎么做吗？

thank you in advance. 先感谢您。

let me show you my code below, 让我在下面显示我的代码，

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function classStartsWith(str) {
  return $('div').map( function(i,e) {
    var classes = e.className.split(' ');
    for (var i=0, j=classes.length; i < j; i++) {
      if (classes[i].substr(0, str.length) == str) return e;
    }
  }).get();
}
function classEndWith(str) {
  return $('div').map( function(i,e) {
    var classes = e.className.split(' ');
    for (var i=0, j=classes.length; i < j; i++) {
            if (classes[i].indexOf('mt-') || classes[i].indexOf('mb-') || classes  [i].indexOf('mr-') || classes[i].indexOf('ml-') || classes[i].indexOf('pt-') || classes[i].indexOf('pb-') || classes[i].indexOf('pr-') || classes[i].indexOf('pl-'))
    {
                    var ct = classes[i].split('-');
                    var cts = ct[1];
            }
      if (classes[i].substr(0, str.length) == str) return e,cts;
    }
  }).get();
}
$(document).ready(function(){
    $(classStartsWith('mt-')).each(function(){
        $(this).css('margin-top', classEndWith('mt-')+'px');
    });
    $(classStartsWith('mb-')).each(function(){
        $(this).css('margin-bottom', classEndWith('mb-')+'px');
    });
    $(classStartsWith('mr-')).each(function(){
        $(this).css('margin-right', classEndWith('mr-')+'px');
    });
    $(classStartsWith('ml-')).each(function(){
        $(this).css('margin-left', classEndWith('ml-')+'px');
    });

    $(classStartsWith('pt-')).each(function(){
        $(this).css('padding-top',  classEndWith('pt-')+'px');
    });
    $(classStartsWith('pb-')).each(function(){
        $(this).css('padding-bottom',  classEndWith('pb-')+'px');
    });
    $(classStartsWith('pr-')).each(function(){
        $(this).css('padding-right',  classEndWith('pr-')+'px');
    });
    $(classStartsWith('pl-')).each(function(){
        $(this).css('padding-left',  classEndWith('pl-')+'px');
    });
});
    </script>

</head>


<body>

<div class="mt-100 mb-200" style="width:300px;height:300px;border:1px solid red">
aaaa
</div>
<div class="pt-200 mb-200" style="width:300px;height:300px;border:1px solid red">
bbb
</div>
<div class="pr-300 ml-300 mt300" style="width:300px;height:300px;border:1px solid red">
ccc
</div>
<div class="pl-200 mt200" style="width:300px;height:300px;border:1px solid red">
ddd
</div>
</body>

Answer 1

The way you handle it now presents way too much overhead for this kind of task. 现在，您的处理方式为此类任务带来了太多的开销。

I recommend you to learn more about using the data attribute on your HTML tags. 我建议您了解有关在HTML标记上使用data属性的更多信息。 These attributes allow you to define tag specific settings which you can easily read with jQuery and make it respond to the data. 这些属性允许您定义特定于标签的设置，您可以使用jQuery轻松读取它们并使它们对数据做出响应。

Example: 例：

<div class="my-div-class" data-mt="100" data-mb="200">...</div>
<div class="my-div-class" data-pt="200" data-mb="200">...</div>

<script>
    $(function() {
        // Walk through each element with this class
        $('.my-div-class').each(function() {
            var thisDiv = $(this), // cache this element
                thisData = thisDiv.data(), // get all data attributes
                thisCSS = {}; // create the css array

            // Check which data is set and update the css accordingly
            if (thisData['mt']) {
                thisCSS['margin-top'] = thisData['mt'] + 'px';
            }
            if (thisData['mb']) {
                thisCSS['margin-bottom'] = thisData['mb'] + 'px';
            }
            if (thisData['pt']) {
                thisCSS['padding-top'] = thisData['pt'] + 'px';
            }
            if (thisData['pb']) {
                thisCSS['padding-bottom'] = thisData['pb'] + 'px';
            }

            // Add the css to this element
            thisDiv.css(thisCSS);

            // The following two lines show the data in each div for debugging. 
            // Remove these lines when you don't need this info anymore.        
            thisDiv.append('<div>CSS: ' + JSON.stringify(thisCSS) + '</div>');
            thisDiv.append('<div>DATA: ' + JSON.stringify(thisData) + '</div>');
        });
    });
</script>

Here is the JSFiddle . 这是JSFiddle 。

And here is the jQuery Documentation on .data() . 这是.data()上的jQuery文档。

Also check out the data-attribute documentation here . 另请在此处查看data-attribute文档。

读取课程并使用javascript或jquery应用CSS

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-07-07 10:21:29

读取课程并使用javascript或jquery应用CSS

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-07-07 10:21:29

解决方案1
1 已采纳 2014-07-07 10:21:29