Q:

How to change colors geoJSON marker on leaflet based on ID?

i'm simply want to change my marker from geoJSON on my leaflet based on ID properties in geoJSON marker, i've try follow tutorial on leaflet and also i've google it and still i can't find conclusion how to fix my code
Here my full code

<!DOCTYPE HTML>
<html>
<head>
 <title></title>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet's CSS -->
   <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 1366px; height: 720px;"></div>
<script>
var mymap = L.map('mapid').setView([-2.729070029832631,107.64713287353514], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/hadicns/cjji5fjq61nru2rmiheweks5d/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGFkaWNucyIsImEiOiJjampoem5kbWIycjYzM3FudjA2cDJhZmN6In0.cYnG3YB44jr4yitE_HFSgg', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(mymap);

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}
function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.popupContent) {
        layer.bindPopup(feature.properties.popupContent);
    }
}
var geojsonFeature = {"type":"FeatureCollection",
 "features":[
   {"type":"Feature",
    "properties":{"siteid":"TJN012",
                  "sitename":"TJN012MG1_TSEL_TanjungPandan3",
                  "popupContent":"siteid: TJN012<br>sitename: TJN012MG1_TSEL_TanjungPandan3",
                  },
    "geometry":{"type":"Point",
                "coordinates":[107.63576,-2.72322]},
     "id": 3126},
   {"type":"Feature",
    "properties":{"siteid":"TJN002",
                  "sitename":"TJN002MD1_TSEL_TanjungPandanII",
                  "popupContent":"siteid: TJN002<br>sitename: TJN002MD1_TSEL_TanjungPandanII"
      },
    "geometry":{"type":"Point",
                "coordinates":[107.65699,-2.7366]},
      "id": 3127 }]};


L.geoJSON(geojsonFeature, {

  style: function (feature) {
   return feature.properties && feature.properties.style;
  },

  onEachFeature: onEachFeature,

  pointToLayer: function (feature, latlng) {
   var colors = {
    3126: "#000",
    3127: "#001"
   };
   return new L.circleMarker(latlng, {
    radius: 8,
    fillColor: colors[feature.properties.id],
    color: colors[feature.properties.id],
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
    
   });
  }
 }).addTo(mymap);
L.geoJSON(geojsonFeature).addTo(mymap);
L.geoJSON(geojsonFeature, {
    onEachFeature: onEachFeature
}).addTo(mymap);
</script>

</body>
</html>

And it's end up with black circle below marker icon for each marker i work on, please help me to change the marker color 
code results

A:

In order to replace colors with a key value lookup you need to define a function instead of use array slicing. I created this function for ease of demonstration:
function getColor(d) {
  if (d === 3126)
    return "#000";
  if (d === 3127)
    return "#ff0000";
}

Your question originally used "#001" which also renders as black in the browser so I changed the color.
Finally, adding this function to L.geoJson:
<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet's CSS -->
   <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 1366px; height: 720px;"></div>
<script>
var mymap = L.map('mapid').setView([-2.729070029832631,107.64713287353514], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/hadicns/cjji5fjq61nru2rmiheweks5d/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGFkaWNucyIsImEiOiJjampoem5kbWIycjYzM3FudjA2cDJhZmN6In0.cYnG3YB44jr4yitE_HFSgg', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(mymap);

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}
function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.popupContent) {
        layer.bindPopup(feature.properties.popupContent);
    }
}
var geojsonFeature = {"type":"FeatureCollection",
 "features":[
   {"type":"Feature",
    "properties":{"siteid":"TJN012",
                  "sitename":"TJN012MG1_TSEL_TanjungPandan3",
                  "popupContent":"siteid: TJN012<br>sitename: TJN012MG1_TSEL_TanjungPandan3",
                  },
    "geometry":{"type":"Point",
                "coordinates":[107.63576,-2.72322]},
     "id": 3126},
   {"type":"Feature",
    "properties":{"siteid":"TJN002",
                  "sitename":"TJN002MD1_TSEL_TanjungPandanII",
                  "popupContent":"siteid: TJN002<br>sitename: TJN002MD1_TSEL_TanjungPandanII"
                  },
    "geometry":{"type":"Point",
                "coordinates":[107.65699,-2.7366]},
      "id": 3127 }]};

function getColor(d) {
  if (d === 3126)
    return "#000";
  if (d === 3127)
    return "#ff0000";
}

L.geoJSON(geojsonFeature, {

        style: function (feature) {
            return feature.properties && feature.properties.style;
        },

        onEachFeature: onEachFeature,

        pointToLayer: function (feature, latlng) {

    console.log(getColor(feature.id));
      return new L.circleMarker(latlng, {
                radius: 8,
                fillColor: getColor(feature.id),
        color: getColor(feature.id),
        weight: 1,
                opacity: 1,
                fillOpacity: 0.8

            });
        }
    }).addTo(mymap);

L.geoJSON(geojsonFeature).addTo(mymap);

</script>

</body>
</html>

Results in:

