datatable -- dom位置确定和样式修改

Posted 2023-05-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了datatable -- dom位置确定和样式修改相关的知识，希望对你有一定的参考价值。

参考技术A 参考 http://www.datatables.club/reference/option/dom.html

默认dom的取值为 lrtip ，可以为dom添加其他元素，或修改位置，如上实例。

Datatables会添加一些控制元素在表格的周围，比如默认状态下改变每页显示条数（l）的空间在左上角，即使搜索框（f）在右上角，表格的信息（i）显示在左下角，分页控件（p）显示在右下角。这些控件在给大家带来便利的同时，也可能出现困惑。比如我想把l放在i的后面，我想表格的上下都有p，我想加入自己的控件放在l的后面……这些太多了，那么下面就给大家介绍怎么去使用dom属性配置已经自定义。

上面我已经用了一些英文字母标注在每个控件的后面，开始看肯定会有些疑惑，或者不熟悉，不要着急，我来告诉大家这些到底是什么

作者为了适应我们所说的这些情况，已经考虑到了，所以有这么强大的dom属性。那么作者定义了如下字母：

这些字母你可以理解为一个标签，dt会自动把这些字母替换成相应的控件，就想模板一样。上面的这些元素 l、f、t、i、p、r除了t只能指定一次，其他的均可多次指定。

下面还有两个字母是应用到jQueryUI上的，不过作者推荐在1.10甚至1.11版本中不去使用他，通过使用 jQueryUIOption 来分离开

最后，你也可以添加插件给Datatables，指定新的字母。比如 TableTools 就是添加了 T 来表示。在dom里指定之后，相应的按钮就添加到表格上了

注意：dom的用法可能还不是很简单，希望在1.11版本的计划中更加优化这个参数的使用，让表格定位更简单

Dom修改元素样式

提纲：我们可以通过js来修改元素的大小，颜色，位置等样式

1.element.style 行内样式的操作

2.element.className 可以获取元素的class名称

3.element.setAttribute("type","button"); 获取元素修改元素的行内样式

4.insertRule(rule,index) .document.styleSheets[0]用来获取外部样式表！使用myStyle.insertRule在外部样式表中插入styleCss规则

定义和用法insertRule() 方法在样式表中插入一条规则。返回值参数 index 的值。addRule() 方法向样式表插入一条规则，该方式是特定于 IE 的方法。

参数	描述
rule	必需。要添加到样式表的规则的完整的、可解析的文本表示。对于规则集（rule sets），rule 指示选择器和样式声明。对于 @ 规则（At rules），rule 指示 @ 标识符和规则内容。
index	必需。要把规则插入或附加到 cssRules 数组中的位置。

参数

描述

rule

必需。要添加到样式表的规则的完整的、可解析的文本表示。

对于规则集（rule sets），rule 指示选择器和样式声明。
对于 @ 规则（At rules），rule 指示 @ 标识符和规则内容。

index

必需。要把规则插入或附加到 cssRules 数组中的位置。

5. **addRule(selector,style,index)**.document.styleSheets[0]用来获取外部样式表！使用addRule修改伪类外部cssStyle的样式

描述该方法在样式表的 rules 数组的指定 index 处插入（或附加）一条新的 CSS 样式规则。这是标准 insertRule() 方法的特定于 IE 的替代。

参数	描述
selector	必需。规则的 CSS 选择器。
style	必需。应用于匹配该选择器的元素的样式。这个样式字符串是一个分号隔开的属性：值对的列表。并没有使用花括号开始或结束。
index	可选。规则数组中插入或附加规则的位置。如果这个可选参数被省略掉，则新的规则会增加到规则数组的最后。

参数

描述

selector

必需。规则的 CSS 选择器。

style

必需。应用于匹配该选择器的元素的样式。

这个样式字符串是一个分号隔开的属性：值对的列表。并没有使用花括号开始或结束。

index

可选。规则数组中插入或附加规则的位置。

如果这个可选参数被省略掉，则新的规则会增加到规则数组的最后。

一.element.style 获取元素进行内样式的操作

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="a1"></div>
    <script type="text/javascript">
        var a1 = document.getElementById("a1")
        a1.onclick = function(){
            a1.style.backgroundColor = "blue";
        }
    </script>
</body>
</html>

点击过后改变style的样式是因为style的内联权重比外联样式的权重高所以会改变

技术图片

二.element.className类名样式操作可以获取到element中的class="类名"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body id="myid" class="mystyle">

<script>
var x=document.getElementsByTagName(‘body‘)[0];
document.write("Body 元素 CSS 类为: " + x.className);
document.write("<br>");
document.write("另一种方式: ");
document.write(document.getElementById(‘myid‘).className);
</script>

</body>
</html>

技术图片

三四五.方法都写在下方同一个例子之中看一看实际中该如何运用！（微信红心点赞效果）

下面是代码：用css创建一个红心然后利用dom添加样式！

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
        div{
            position:relative;
            margin:200px auto;
            width: 300px;
              height:270px;
              /*background: red;*/
              animation: mymove 1s linear;
        }
        div:before
        {
            content: "";
            position: absolute;
            left: 150px;
              width: 150px;
              height: 240px;
              background: blue;
              border-radius: 150px 150px 15px 15px;
              transform-origin: 0 100%;
            transform: rotate(-45deg);
            
        }
        div:after{
            content: "";
            position: absolute;
            left: 0px;
              width: 150px;
              height: 240px;
              background: blue;
              border-radius: 150px 150px 15px 15px;
              transform-origin: 100% 100%;
            transform: rotate(45deg);
            
        }
        
    </style>
</head>

<body>
    <div id="a1" class="a"></div>
    
    <script type="text/javascript">
//        获取到外部css中的样式需要后面添加[数组]用来准确的获取哪一个外部样式
        var a1 = document.styleSheets[0];
        var id = document.getElementById("a1")
        document.onclick = function(){
//            这个方法用于给element添加行内样式(内嵌样式)            
            id.setAttribute("style","border:10px solid pink;");
//            这个方法用于操纵外部样式表中的选择器 并且也可以改变外部样式表伪类选择器里面的值,注意！外部样式权重比例要低于内联样式
            a1.addRule(‘div::before‘,‘background: green; color:red; ‘);
            a1.addRule(‘div::after‘,‘background: green; color:red; ‘);
//            insertRule方法可以在外部样式表中添加一条Css规则
            a1.insertRule("@keyframes mymove{0%{transform: scale(1);}50%{transform: scale(1.2);opacity: 0.8;}100%{transform: scale(1);}}",3);
        }
    </script>
</body>
</html>